CSS 幽灵元素方案垂直居中注意事项

之前,我们转载了一篇博文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 即可避免这个问题。

吃一堑长一智,古人诚不欺我也~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贤羽的前端小栈

探索 PHP 与 Vue 通用直出模板方案

我们通常说的“页面直出”,其实就是服务端渲染(SSR, Server-Side Render)。最初的 JS SPA 方案有个常见的问题,就是脚本没有加载执行完...

3.2K20
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

36070
来自专栏Coco的专栏

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

13440
来自专栏Guangdong Qi

iOS开发常用之网络

16010
来自专栏软件

那些前端常用的网站插件

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

33450
来自专栏Google Dart

Flutte部件目录-Material Components 顶

底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。 BottomNavigationBar小部件实现此组件。

38440
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.2K180
来自专栏前端真相

HTML

24280
来自专栏hightopo

原 荐 拓扑图弹力布局呈现Flickr图片搜

19240
来自专栏DeveWork

CSS 代码的书写规范、顺序

本文来自设计达人网站,Jeff 看到该文感觉非常有必要学习分享,so,转载在这里,感谢原作者——写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规...

29990

扫码关注云+社区

领取腾讯云代金券