html - 在伪选择器之后使用 css 完美居中内容

Question

谁能解释一下这里发生了什么？查看下面的代码，您会期望这两个元素彼此对齐。似乎并非如此。

HTML

<div class="BX"></div>

CSS

.BX{
  position:absolute;
  top:10px;
  left:10px;
  height:30px;
  width:30px;
}
.BX:after{
  content:"×";
  position:absolute;
  font-size:50px;
  top:0;
  left:0;
}

问题

我知道我可以很容易地修改代码来改变绝对偏移量，但是我更感兴趣的是了解后选择器从哪里派生出它的左上角位置？

http://jsfiddle.net/793vk/

Answer 1

这是我的两分钱。首先，为了诊断问题，我将 overflow:hidden 设置到父元素 .BX 以研究问题。这就是我所看到的。子元素明显溢出，overflow:hidden 展示了这一点。但这仍然不能解释为什么会出现“下推”效应。让我们想象一下 font-size 和 line-height 是如何相关的。

子类继承了父类的line-height，必须重写。 line-height 实际上是默认使用 font-size 计算的。如上图所示，会发生溢出，这通过行前高度和行后高度阶段可视化。请记住，用于居中的 line-height 并不是最好的主意。请注意枢轴如何向上移动一步。

那么这里发生了什么。我们并没有在平面上神奇地向上移动“X”，但我们只是在同一个点上旋转并放置它的容器类以向上移动一步。从“X”底部到结束轮廓线的距离就可以看出这一点。

为什么 line-height:30px 有效？

通常的做法是使用黄金比例的值 1.618 来计算完美的行高，即 line-height = font-size/1.618。如果您采用当前的 font-size 50px 并计算 line-height = 50/1.618 = 30。您会得到 ~30px。

显式复制行高

默认 line-height 是这种方式的原因是由于公式 line-height = font-size*1.2 等于到 60px，在我们的例子中。 (l = 50*1.2)

如果您尝试通过显式点击 CSS 中的属性来重现 line-height，执行 line-height:60px，您将重现 line-浏览器默认设置的高度。