Home > Article > Web Front-end > 关于多行文字水平垂直居中的一点研究_html/css_WEB-ITnose
关于多行文字水平垂直居中的一点研究_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:541129browse
前些天在W3CPlus看到了一篇文章，提到用CSS制作水平垂直居中，在测试其中的第六点时发现了一些小问题：
添加了一个无意义的新标签
<div id="extra">
当设定内容宽度的时候，文本换行了
对于第一点，解决的办法是使用 :before 伪元素 ：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平垂直居中</title> 6 <style> 7 .wrapper { 8 width: 200px; 9 height: 200px;10 background: skyblue;11 }12 .wrapper:before {13 content: '.';14 display: inline-block;15 vertical-align: middle;16 height: 100%;17 }18 .content {19 display: inline-block;20 text-align: center;21 }22 </style>23 </head>24 25 <body>26 <div class="wrapper">27 <div class="content">多行文字居中 多行文字居中 多行文字居中 </div>28 </div>29 </body>30 </html>
附Demo
但是！大家也都注意到了：文本换行了
这便是inline-block产生的空隙在捣乱了
为了解决这个问题，可以试试这个hack：
1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }
保存再看看：
搞定！
附完整源码
参考资料（推荐阅读）：
CSS制作水平垂直居中对齐
如何解决inline-block元素的空白间距
inline-block 前世今生
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：IE6 中的最大最小?度和高度 css 高度 控制(兼容版本)_html/css_WEB-ITnoseNext article：ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案_html/css_WEB-ITnose