您的当前位置:首页正文

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

2020-11-27 来源:九壹网

前些天在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 前世今生

显示全文