CSS 幽灵元素方案垂直居中注意事项
CSS 幽灵元素方案垂直居中注意事项
FungLeo
发布于 2018-01-08 15:35:50
发布于 2018-01-08 15:35:50
之前，我们转载了一篇博文CSS居中完全指南，在这篇文章中，提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。
这种方案非常适合解决一些图片布局，因此我也在项目中经常使用这种解决方案。
首先，我们温习一下原文的说法：
如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before 撑开高度 ，文字垂直居中。
.parent {
position: relative;
}
.parent::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}但是今天遇到一个问题，原来客户在CMS使用，模板代码给格式化了，也就是有缩进，导致图片始终距离左侧有3px 到 4px的间隙。
在行内元素中，多个空格或者换行或者TAB缩进，会当成一个空格处理。一个空格，也是有宽度的，这是导致这个问题的原因。
因此，将这段代码调整为如下，即可解决这个问题
.parent {
position: relative;
}
.parent::after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.child {
display: inline-block;
vertical-align: middle;
}在我们的 .child 后面插入 ::after 即可避免这个问题。
吃一堑长一智，古人诚不欺我也~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读