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

·  阅读 5671

我们先看运行效果:

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,现在可理解只设置行高后,内容区上下方自动填充行间距,使得文字垂直居中。

<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>&nbsp;</i>
</p>
复制代码

inline-block属性使得外面包了一层line box。根据知识点2以及内联元素默认基线对齐,给spani都设置为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;
}

复制代码

看完整代码点这

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改