CSS实现p标签，span，div，a，pre文字垂直居中

最新推荐文章于 2024-04-23 01:25:09 发布

萧熙2580

最新推荐文章于 2024-04-23 01:25:09 发布

阅读量5.4k

点赞数 5

分类专栏： html+css入门精选文章标签： html css

萧熙

本文链接：https://blog.csdn.net/qq_47223942/article/details/109214273

版权

html+css入门精选专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS实现p标签，span，div，a，pre文字垂直居中，建议小白观看

在HTML和css中，文字垂直居中一直是个困惑，因为在css中只有text-align属性设置水平对齐方式，text-align: center;这种方式水平对齐。以下是css设置文本垂直居中的对齐方式。

源码可以参考，下图

css部分

源码可以参考，先通过text-align:center;来设置水平居中，再通过行高line-height: 100px; 100px是父元素的高度，通过设置行高来实现垂直居中。

以下讲解p，span，div，a，pre所显示的文字，如图显示都可以垂直居中显示。

话不多说，先上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html中的文字如何垂直居中</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width: 100px;
            height: 100px;
            /* 设置文字水平对齐方式为居中 */
            text-align: center;
            /* 文本设置行高为该父元素的高度即可垂直居中 */
            line-height: 100px;
        }

        .a{
            background-color: blue;
        }

        .b{
            background-color: green;
        }

        .c{
            background-color: red;
        }

        .d{
            background-color: brown;
        }

        .e{
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="a">
        <p>p标签</p>
    </div>
    <div class="b">
        <span>span</span>
    </div>
    <div class="c">
        div
    </div>
    <div class="d">
        <a href="#">a超链接</a>
    </div>
    <div class="e">
        <pre>我是pre <br />标签</pre>    
    </div>
</body>
</html>

如图显示p，a，span，div，pre这些标签内的文字都有垂直居中显示。不过这都是显示单行文字，要是显示多行文字呢？如图下。把p标签的内容多复制几行，会发现每个p标签的行高很大。所以这种方法并不是很可取的。对于单行文字可行，多行文字不可行。

看到上面的问题，很显然这种方达不是很可取，接下来试试下面的方法。
效果：

html部分

<div class="box">
    <div class="a">
        <p>p标签</p>
        <p>p标签</p>
        <p>p标签</p>
    </div>    
</div>

css部分

        .box{
            /* 绝对定位 */
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .a{
            /* 相对定位，相对 绝对定位（若没有绝对定位那将会追溯到body，相对body定位） */
            position: absolute;
            margin-top: 16%;
            /* 水平水平对齐方式为居中 */
            text-align: center;
            width: 100%;
            /* 高度自动，随着内容高度改变 */
            height:auto;
            background-color: brown;
        }

这个是先把文字水平居中，再把第二个盒子垂直居中，达到文字水平垂直居中的效果。css部分第二个盒子的上边距是根据父元素和本身计算得出后写上百分比。

感谢观看，大佬勿喷

萧熙2580

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
CSS实现p标签，span，div，a，pre文字垂直居中

CSS实现p标签，span，div，a，pre文字垂直居中，建议小白观看在HTML和css中，文字垂直居中一直是个困惑，因为在css中只有text-align属性设置水平对齐方式，text-align: center;这种方式水平对齐。以下是css设置文本垂直居中的对齐方式。源码可以参考，下图源码可以参考，先通过text-align:center;来设置水平居中，再通过行高line-height: 100px; 100px是父元素的高度，通过...
复制链接

扫一扫