前些天在w3cplus看到了一篇文章，提到用css制作水平垂直居中，在测试其中的第六点时发现了一些小问题：
添加了一个无意义的新标签
当设定内容宽度的时候，文本换行了
对于第一点，解决的办法是使用 :before 伪元素 ：
1 2 3 4 5水平垂直居中 6 23 24 25 262729 30多行文字居中 多行文字居中 多行文字居中28
立即学习“前端免费学习笔记（深入）”；
附Demo
但是！大家也都注意到了：文本换行了
这便是inline-block产生的空隙在捣乱了
为了解决这个问题，可以试试这个hack：
1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }
立即学习“前端免费学习笔记（深入）”；
保存再看看：
搞定！
附完整源码
参考资料（推荐阅读）：
CSS制作水平垂直居中对齐
如何解决inline-block元素的空白间距
inline-block 前世今生
相关文章
HTML元素居中对齐怎么做_HTML元素居中对齐CSS方法
CSS 块级元素宽度设置与水平居中指南
html内容居中 html内容居中的几种方法
html怎么设置居中对齐 html居中对齐设置方法
HTML如何设置文本对齐？text-align属性的作用是什么？
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
