垂直居中的伪元素文本答案

【问题标题】：Vertically centering pseudo element text垂直居中的伪元素文本
【发布时间】：2016-04-10 11:02:04
【问题描述】：

我一直试图弄清楚如何垂直居中一个包含文本（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中文字上下“填充”的原因是什么？）

【问题讨论】：

你可以在jsfiddle中添加你的代码吗？
工作得很好 -- jsfiddle.net/abhitalks/LhthmtL3
还有这个 -- jsfiddle.net/abhitalks/LhthmtL3/1
@Abhitalks 它似乎只是居中，因为它更小，但它不是：/
@Danield 不确定这是一个答案，但是，如果 2 个 inline-block 元素并排，您可以使用 vertical-align 将它们彼此居中。因为 letter 和 font-family使用时，需要调整第二个垂直对齐属性。测试：codepen.io/anon/pen/EPWExj这里应该使用图标或图像来掌握布局:)

标签： html css vertical-alignment

【解决方案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;
}

&lt;div class="next-button"&gt;&lt;/div&gt;

【讨论】：

看起来它仍然没有居中并且稍微向中间对齐。我猜和我的问题一样。我也不知道为什么我被否决了。
@PraveenKumar 在我所有的浏览器中居中，你用的是哪一个？
@PraveenKumar 很好，它以我的 Chrome 为中心.. 你能截图吗？
哦，看起来我们有不同的字体。我将字体设置为 Arial for Demo，现在应该居中吗？

【解决方案2】：

有没有办法垂直对齐伪元素？

是的，而且你描述的所有方法都有效。

以transform方法为例——只需给字符加一个边框——就可以清楚地看到字符——包括红色边框中的整个区域——居中(Fiddle Demo)

所以这里的问题是字符字形本身没有居中 - 这可能是有充分理由的 - 就像下划线字符也没有居中一样。

所以这实际上与伪元素无关，而是您选择居中的特定字符。

您要么必须手动调整字符以使其居中要么为您的箭头使用不同的字符。

【讨论】：

我明白你所说的关于字形本身的居中。但无论如何，这似乎仍然取决于文本本身的大小/高度。就像如果我将字体大小更改为1em，突然它没有居中：jsfiddle.net/me6a3nq2/6

【解决方案3】：

虽然line-height 可以完成这项工作，但我找到了另一种解决方案。！！

只需将vertical-align:sub 给.next-button 的pseudo element。

这是小提琴。

    .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;
      vertical-align: sub;
   }

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

【讨论】：

【解决方案4】：

您可以在 CSS3 中使用 flexbox。

display: flex,
justify-content: center  // or you can also use space-around, it all depends.

// other ways:
align-item: center  or;
align-self: center

这里是一个示例的链接：How do I vertically center text with CSS?

【讨论】：