关于多行文字水平垂直居中的一点研究_html/css_WEB-ITnose

程序员文章站 2022-05-28 13:22:45

...

前些天在W3CPlus看到了一篇文章，提到用CSS制作水平垂直居中，在测试其中的第六点时发现了一些小问题：

添加了一个无意义的新标签

当设定内容宽度的时候，文本换行了

对于第一点，解决的办法是使用 :before 伪元素：

 1  2  3  4  5 水平垂直居中 6 23 24 25 26 27   多行文字居中 多行文字居中 多行文字居中 
28 
29 30

附Demo

但是！大家也都注意到了：文本换行了

这便是inline-block产生的空隙在捣乱了

为了解决这个问题，可以试试这个hack：

1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }

保存再看看：

搞定！

附完整源码

参考资料（推荐阅读）：

CSS制作水平垂直居中对齐

如何解决inline-block元素的空白间距

inline-block 前世今生

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

div垂直居中的N种方法以及多行文本垂直居中的方法_html/css_WEB-ITnose