Question

我一直在试图找出如何垂直居中包含文本（::after属性）的content伪元素。

之前的问题：有一些 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;：

我是如何在我的项目中完成的。但是如果高度发生变化，你也必须改变线高。问题是这些符号不是以它们的中心为中心，而是在文本的基线上。我不认为有更好的解决方案。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

是的，您描述的所有方式实际上都有效。

以transform方法为例 - 只需为角色添加边框 - 您就可以清楚地看到角色（包括红色边框中的整个区域）居中(Fiddle Demo)

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

因此，这实际上与伪元素无关，而是与您选择居中的特定角色无关。

您必须手动调整角色，使其居中或为箭头使用不同的角色。

Answer 3

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

只需将vertical-align:sub提供给pseudo element的{{1}}即可。

这是小提琴。

＆＃13;

.next-button

＆＃13;

    .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;
   }

＆＃13;

Answer 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?

垂直居中伪元素文本

4 个答案: