如何在僞元素之前居中文本？

Question

我有這樣的代碼：

span { 
 
    border-radius: 50%; 
 
    background-color: #d8d9dd; 
 
    border: 6px solid #262c40; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin: 30px 0 0 40px; 
 
    display: block; 
 
} 
 
span:before { 
 
    content: attr(data-value); 
 
    position: relative; 
 
    white-space: pre; 
 
    display: inline; 
 
    top: -27px; 
 
    left: -29px; 
 
    width: 200px; 
 
    text-align: center; 
 
}

<span data-value="November 2016"></span> 
 
<span data-value="May 2016"></span>

我如何中心裏面的文字：before僞元素是在跨度的中間？可能嗎？

Answer 1

最好的事情將是位置採用了流行的定心技術的before僞元素絕對關於span：

top: 0; 
left: 50%; 
transform: translate(-50%, -25px); 

注意-25px是抵消圓圈上面的文字（有高度25px的） - 見下面的演示：

span { 
 
    border-radius: 50%; 
 
    background-color: #d8d9dd; 
 
    border: 6px solid #262c40; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin: 30px 0 0 40px; 
 
    display: block; 
 
    position:relative; 
 
} 
 
span:before { 
 
    content: attr(data-value); 
 
    position: absolute; 
 
    white-space: pre; 
 
    display: inline; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translate(-50%, -25px); 
 
}

<span data-value="November 2016"></span> 
 
<span data-value="May 2016"></span>

Answer 2

從MDN：

[中:before僞元素]是直列默認

給予行內元素width什麼也不做，所以你需要的款式作爲display: block（或inline-block如果這是更合適的）。它也證明，您需要將left值調整爲大約-88px以使文本居中在圓上。

span { 
 
    border-radius: 50%; 
 
    background-color: #d8d9dd; 
 
    border: 6px solid #262c40; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin: 30px 0 0 40px; 
 
    display: block; 
 
} 
 
span:before { 
 
    content: attr(data-value); 
 
    position: relative; 
 
    white-space: pre; 
 
    display: inline; 
 
    top: -27px; 
 
    left: -88px; 
 
    width: 200px; 
 
    text-align: center; 
 
    display: block; 
 
}

<span data-value="November 2016"></span> 
 
<span data-value="May 2016"></span>

Answer 3

我被打成這樣，但這裏是我的解決方案：

span { 
    border-radius: 50%; 
    background-color: #d8d9dd; 
    border: 6px solid #262c40; 
    width: 25px; 
    height: 25px; 
    margin: 30px 0 0 40px; 
    display: block; 
} 
span:before { 
    content: attr(data-value); 
    position: relative; 
    white-space: pre; 
    display: inline-block; 
    top: -27px; 
    left: -50px; 
    width: 125px; 
    text-align: center; 
} 

的變化是使用在:before風格inline-block顯示和調整left和width的文字。

Answer 4

添加display:inline-block;並添加margin-left:-87px。其中87px從

100px的-13px（跨度25像素的50％）（50整個寬度200像素的％）

span { 
 
    border-radius: 50%; 
 
    background-color: #d8d9dd; 
 
    border: 6px solid #262c40; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin: 30px 0 0 40px; 
 
    display: block; 
 
} 
 
span:before { 
 
    content: attr(data-value); 
 
    position: relative; 
 
    white-space: pre; 
 
    display: inline-block; 
 
    top: -27px;/* 
 
    left: -29px;*/ 
 
    margin-left: -87px; 
 
    width: 200px; 
 
    text-align: center; 
 
}

<span data-value="November 2016"></span> 
 
<span data-value="May 2016"></span>

Answer 5

衍生我建議不要使用負翻譯。如果你沒有足夠小心，它可能會在視口外部結束。

此外，你不應該插入與僞元素的內容。僞元素只能用於樣式目的。就像這樣：

body { 
 
    display: inline-block; 
 
} 
 
span { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
span:after { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    background-color: #d8d9dd; 
 
    border: 6px solid #262c40; 
 
    width: 25px; 
 
    height: 25px; 
 
    margin: 10px auto 30px; 
 
    display: block; 
 
}

<span>November 2016</span> 
 
<span>May 2016</span>

跨度內的文本由於text-align: center中心。

僞元素圈由於margin-left: auto和margin-right: auto而居中。