css实现行内文字垂直居中

2018-06-24 02:01:31来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

 

之前本人一直使用浮动、相对定位、绝对定位和display:table等css的方法进行定位。网上得知flex可实现弹性布局,符合未来发展趋势,随尝试。

1:让盒子行内文字垂直居中,解决思路是讲文字的行高设置为盒子的高度。

p {
           border:#333333 solid 1px;
           height:50px;
           line-height:50px;
           margin-bottom:30px;
        }

 

 

2:让盒子行内文字垂直居中,解决思路是对盒子的高度设定,然后对盒子的padding-top和padding-bottom设置相同的值。

 p {
           border:#333333 solid 1px;
           padding-top:30px;
           padding-bottom:30px;
           margin-bottom:30px;
        }

3:让盒子行内文字垂直居中,解决思路是让盒子的display属性变成table,然后文字添加span标签,span属性display:table-cell

p {
           border:#333333 solid 1px;
           height:60px;
           display:table;
           width:100%;
           margin-bottom:30px;
        }
        p span {
            display:table-cell;
            vertical-align:middle;
        }
<p><span>中华人民共和国</span></p>

4:让盒子行内文字垂直居中,解决思路是让盒子display的属性变成flex

        p {
           border:#333333 solid 1px;
           height:60px;
           display:flex;
           align-items:center;
           margin-bottom:30px;
        }
<p><span>中华人民共和国</span></p>

如果让“中华人民共和国”水平也居中的话,css调整为:

p {
           border:#333333 solid 1px;
           height:60px;
           display:flex;
           align-items:center;/*垂直方向*/
           justify-content:center;/*水平方向*/
           margin-bottom:30px;
        }

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端开发初学者

下一篇:css 超出规定行数自动隐藏