2018-07-24 多行文字的垂直居中，使用line-heig
作者:
Armin0202 | 来源:发表于
2018-08-31 17:22 被阅读25次
实现多行文字垂直居中，有很多种方法。常见的就有浮动处理，但是这里，用line-height实现。
<div class="mulit-line__wrapper">
<span class="mulit-line">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span>
</div>
.mulit-line__wrapper {
margin-left: 100px;
margin-top: 20px;
width: 280px;
line-height: 150px;
border: 1px dashed #cccccc;
font-size: 0;
}
.mulit-line {
font-size: 14px;
line-height: 18px;
vertical-align: middle;
display: inline-block;
}
效果图：
image.png
参考：
css行高line-height的一些深入理解及应用
本文标题：2018-07-24 多行文字的垂直居中，使用line-heig
本文链接：https://www.haomeiwen.com/subject/lqjemftx.html
网友评论