垂直居中的伪元素文本
[英]Vertically centering pseudo element text
问题描述
我一直在尝试找出如何垂直放置包含文本（ content属性）的::after伪元素。
先前的问题 ：之前有一些问题可以解决这个问题 ，但是似乎没有一个解决方案适用于这种简单情况。
在这里，我基本上有一个简单的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 。 我通常用这种方法取得很好的成功：
.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本上方和下方的“填充”是什么原因？）
4 个解决方案
解决方案1
1 2016-01-06 11:18:19
如果可以，请设置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>
解决方案2
0 2016-01-06 13:05:07
有什么办法可以垂直对齐伪元素？
是的，您描述的所有方式都有效。
以transform方法为例-仅在字符上添加边框-您就可以清楚地看到字符-包括红色边框中的整个区域-居中（小提琴演示）
因此，这里的问题是字符字形本身不居中-这可能是有充分的理由-就像下划线字符也不居中一样。
因此，这实际上与伪元素无关，而与您选择居中的特定字符无关。
你要么必须使其中心手动调整字符或使用不同的字符为您的箭头。
解决方案3
0 2016-01-07 12:21:09
尽管line-height可以胜任，但我发现了另一种解决方案。
只需将vertical-align:sub赋予.next-button的pseudo element .next-button 。
这是小提琴。
.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
0 2016-08-08 05:51:20
您可以在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
这里是一个示例的链接： 如何使用CSS将文本垂直居中？
垂直/水平居中伪元素生成的内容
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.