Q:你知道如何用line-height使多行文字垂直居中吗？

发表于 | 分类于
字数统计: 606 | 阅读时长 ≈ 2

我们先看运行效果：

line-height实现一行或多行文字垂直居中

知识点

  1. line-height（行高） : 指的是两行文字间基线之间的距离，而实际撑开div高度的不是height，而是line-height。
  2. line box : 每一行称为一条line box，它又是由这一行的许多inline box组成，它的高度可以直接由最大的line-height决定。很多条line box的高度垂直堆叠形成我们见到的div或是p标签之类的父元素高度了。无论line box所占据的高度是多少，其占据的空间都是与文字内容公用水平中垂线的。它的垂直居中的性质可以用来实现文字或图片的垂直居中对齐。
  3. 行间距 - 行内框高度 ：

    行间距是font-size与line-height的差值，被分成两半在内容区的上下
    行内框高度（替换元素）=内容区宽度
    行内框高度（非替换元素）=line-height
    了解更多替换元素非替换元素的区别点这

一行文字垂直居中

根据知识点3，现在可理解只设置行高后，内容区上下方自动填充行间距，使得文字垂直居中。

1
<p class="single_line">这是一行文字这是一行文字这是一行文字</p>
1
2
3
.single_line{
  line-height:150px; border:1px dashed #cccccc; padding-left:5px;font-size:12px;
}

多行文字垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体有大有小怎么办呢？可以借助于line-height。

1
2
3
4
5
6
<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150px的标签内的多行文字，文字大小为12像素。
        <br>这里是第二行，用来测试多行的显示效果。
    </span>
    <i>&nbsp;</i>
</p>

inline-block属性使得外面包了一层line box。根据知识点2以及内联元素默认基线对齐，给span和i都设置为vertical-align:middle即可。实际应用中可将i的width设为0，案例中1px为了帮助理解用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.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;
}

看完整代码点这

更多内容欢迎互相交流一下。

原文链接

-------------end·君-------------