css实现行内文字垂直居中

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

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

css实现行内文字垂直居中

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

css实现行内文字垂直居中

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实现行内文字垂直居中

如果让“*”水平也居中的话,css调整为:

p {
border:#333333 solid 1px;
height:60px;
display:flex;
align-items:center;/*垂直方向*/
justify-content:center;/*水平方向*/
margin-bottom:30px;
}
上一篇:css解决td单元格内文字溢出


下一篇:C# 获取excel架构并的导入sqlserver的方法