line-height 垂直居中

Posted 2020-09-23

tags:

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

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

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

2、多行文字的垂直居中

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

3、图片的垂直居中

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