line-height 垂直居中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了line-height 垂直居中相关的知识,希望对你有一定的参考价值。

1、单行文字的垂直居中对齐

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的,但其实也是有问题的。问题在于height,看我的表述:“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”,差别在于我把height去掉了,这个height是多余的.

2、多行文字的垂直居中

 实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。

3、图片的垂直居中

以上是关于line-height 垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

为什么只设置line-height就可以实现文本垂直居中效果

垂直居中的几种办法

为啥图像垂直居中,`line-height` 位于它们应该在的位置下方 2 个像素?

垂直居中小记 line-height table vertical-align:middle

css各种水平垂直居中

div盒子水平垂直居中