关于多行文字水平垂直居中的一点心得分享

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

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

复制代码
代码如下:

<div id=\"extra\">


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

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

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset=\"utf-8\">
<title>水平垂直居中</title>
<style>
.wrapper {
width: 200px;
height: 200px;
background: skyblue;
}
.wrapper:before {
content: \'.\';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.content {
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class=\"wrapper\">
<div class=\"content\">多行文字居中 多行文字居中 多行文字居中 </div>
</div>
</body>
</html>


附Demo

但是！大家也都注意到了：文本换行了
 
这便是inline-block产生的空隙在捣乱了

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

复制代码
代码如下:

.wrapper {
font-size:0
}
.content {
font-size:16px
}


保存再看看：
 
搞定！
附完整源码

参考资料（推荐阅读）：

CSS制作水平垂直居中对齐
如何解决inline-block元素的空白间距
inline-block 前世今生

本文地址：https://www.stayed.cn/item/7530

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案