懒人原生纯css实现多行文字均保持垂直居中效果 -懒人源码

懒人原生纯css实现多行文字均保持垂直居中效果

作者/代码整理：懒人 (转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：2015-11-09

效果描述：

在实际网页中，如何实现如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？

实现的关键是把文字当图片处理。

用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性）

然后用处理图片垂直居中的方式处理文字的垂直居中即可。

使用方法：

1、将head中的样式复制到你的样式表中

2、将body中的代码部分拷贝过去即可

声明：凡标题注明“懒人原生”二字，均为本站原创，非书面授权谢绝转载