qinyi素材网
当前位置: 首页 > WEB教程 > css设置文字在div中水平垂直居中的方法

css设置文字在div中水平垂直居中的方法

  时间: 2021-11-17   阅读:2.88k
简要教程

今天给大家分享一个使用CSS实现div内文字水平垂直居中和div内子元素文字居中的方法。div内设置文字水平垂直居中需要设置height和line-height的高度一致,并且设置text-align为center。div内子元素文字居中同样需要设置height和line-height的高度一致,并且设置display为inline-block,vertical-align设置为middle。

实现效果

CSS样式

        .demo{
            width: 500px;
            height: 200px;
            border:1px solid red;
            line-height: 200px;/*设置文字内容垂直居中,与height的高度相同*/
            text-align: center;/*设置文字内容居中在中间*/
            margin: auto auto 20px;
        }
        .box{
            background: yellow;
            width: 200px;
            height: 70px;
            display: inline-block; /*一定要将div设置为inline-block*/
            vertical-align: middle;/*设置该元素在父元素中的位置*/
            line-height: 70px;
            border: 1px solid green;
        }

HTML结构

<div class="demo">
    div中居中的文字
</div>

<div class="demo">
    <div class="box">我是子元素的文字</div>
</div>
上一篇: 下一篇: