垂直居中的偽元素文本
[英]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.