html - 垂直居中伪元素文本

Question

我一直在尝试弄清楚如何垂直居中一个包含文本(content 属性)的::after 伪元素).

前题:有一些 previous questions 解决了这个问题，但似乎没有一个解决方案适用于这个简单的案例。

在这里，我基本上有一个简单的 DIV，它应该用作“下一步”按钮。它包含一个简单的右箭头 (Unicode 0x203A)。

标记基本上只是:

<div class = "next-button"></div>

CSS 是:

.next-button {
    position: absolute;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: black;
    cursor: pointer;
}

.next-button::after {
    content: "\203A";
    color: white;
    font-size: 3em;
    line-height: 0;

JSFiddle 链接:https://jsfiddle.net/me6a3nq2/

所以，我一直在尝试各种方法来解决这个问题。首先，vertical-align:middle 在这里不起作用。另一个 CSS 技巧是将父元素的 line-height 设置为等于父元素的 height。但是，这似乎也不起作用。

我可以将 position:relative 添加到 next-button::after，然后相应地调整 top，但这并不完全正确除非我知道箭头的确切高度，否则将箭头居中，这可能会因浏览器而异。

我也试过用一个常用的CSS方法，就是用translateY，as specified here .我通常使用这种方法非常成功:

.next-button::after {
    content: "\203A";
    color: white;
    font-size: 3em;
    line-height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

但即使这样也不适用于伪元素。它似乎移动了箭头，但它偏向底部，至少在 Chrome 上是这样:

我还注意到，在使用 Chrome Inspector 工具时，箭头本身(基本上只是一个文本字符)似乎在其上方和下方自动具有“填充”，并且“上方”填充似乎更大比下面的填充，导致箭头在垂直方向上不居中:

...但是，我无法真正说明为什么存在此填充，我似乎也无法控制它。我认为它可能是 line-height，所以我将 line-height 设置为 0，但是没有效果。

所以，我没有想法。我在想我可能需要放弃使用伪元素，而只是将箭头放在嵌套的 DIV 中。

问题:有什么方法可以垂直对齐伪元素吗？ (还有，伪元素 content 中文本上下“填充”的原因是什么？)

Answer 1

如果你觉得合适，设置line-height: 65px;:

这就是我在元素中的做法。但是，如果高度发生变化，您也必须更改行高。问题是这些符号不是垂直居中于它们的外观中心，而是位于文本的基线上。我认为对此没有更好的解决方案。

.next-button {
  position: absolute;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: black;
  cursor: pointer;
}
.next-button::after {
  font-family: Arial;
  content: "\203A";
  color: white;
  font-size: 3em;
  line-height: 65px;
}

<div class="next-button"></div>