首页 热点专区 小学知识 中学知识 出国留学 考研考公
您的当前位置:首页正文

2018-07-24 多行文字的垂直居中,使用line-heig

2024-12-09 来源:要发发知识网

实现多行文字垂直居中,有很多种方法。常见的就有浮动处理,但是这里,用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

参考:

显示全文