我们先看运行效果:
知识点
- line-height(行高) : 指的是两行文字间基线之间的距离,而实际撑开div高度的不是height,而是line-height。
- **line box **: 每一行称为一条line box,它又是由这一行的许多inline box组成,它的高度可以直接由最大的line-height决定。很多条line box的高度垂直堆叠形成我们见到的div或是p标签之类的父元素高度了。无论line box所占据的高度是多少,其占据的空间都是与文字内容公用水平中垂线的。它的垂直居中的性质可以用来实现文字或图片的垂直居中对齐。
- **行间距 - 行内框高度 **:
一行文字垂直居中
根据知识点3,现在可理解只设置行高后,内容区上下方自动填充行间距,使得文字垂直居中。
<p class="single_line">这是一行文字这是一行文字这是一行文字</p>
复制代码
.single_line{
line-height:150px; border:1px dashed #cccccc; padding-left:5px;font-size:12px;
}
复制代码
多行文字垂直居中
要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div,里面文字单行或多行显示,字体有大有小怎么办呢?可以借助于line-height。
<p class="mulit_line">
<span style="font-size:12px;">这里是高度为150px的标签内的多行文字,文字大小为12像素。
<br>这里是第二行,用来测试多行的显示效果。
</span>
<i> </i>
</p>
复制代码
inline-block属性使得外面包了一层line box。根据知识点2以及内联元素默认基线对齐,给span
和i
都设置为vertical-align:middle
即可。实际应用中可将i
的width设为0,案例中1px为了帮助理解用。
.mulit_line{
border:1px dashed #cccccc;
padding-left:5px;
}
.mulit_line span{
display:inline-block;
vertical-align:middle;
}
.mulit_line i{
width:1px;
display:inline-block;
vertical-align:middle;
font-size:0;
background:red;
line-height:150px;
}
复制代码
更多内容欢迎互相交流一下。