text-align：center在絕對定位跨度上不能正常工作

Question

我需要在<div>放置2 <span> ，第一個跨度必須放在頂部，第二個跨度放在底部，如南北。

<div>
    <span class="north">N</span>
    <span class="south">S</span>
</div>

為此，我考慮使用position:absolute; 在2 <span> 。

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

現在，跨度應該位於左側（默認），以使它們居中，我使用：

div
{
    text-align:center;
}

但我得到了這個：

看看： http ： //jsfiddle.net/Zn4vB/

為什么會發生這種情況？

注意：我不能使用左，右邊距，因為這些跨距的內容不同，我只需要在中心正確對齊它們。

Answer 1

http://jsfiddle.net/Zn4vB/1/

問題是，一旦絕對定位，它就不再遵循文檔流程。 所以文本居中，但只在粉紅色范圍內。 而且由於它絕對定位，即使它是一個div，寬度也會崩潰。

解決方案是使定位的跨度為100％寬度，然后對中工作。

span
{
    background-color:pink;
    left: 0;
    width: 100%;
}

如果你不希望粉紅色擴展整個寬度，那么你必須在定位的跨度內嵌套一個元素（例如span）並給該元素提供背景顏色，如下所示： http ： //jsfiddle.net/Zn4vB/ 6 /

Answer 2

請檢查這個是否是您想要的想法..

div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
    border-style:solid;
}
span
{
    background-color:pink;
    width:100%;
    text-align:center;
}
.north
{
    position:absolute;
    top:0;
}
.south
{
    position:absolute;
    bottom:0;
}

Answer 3

你有正確的定位。 但<span>標簽是內聯元素，因此您需要將它們顯示為塊級元素，並使用display: block; 然后用width: 100%;明確聲明它們的width: 100%; 。

它們將從<div>上的樣式規則繼承text-align屬性，因此文本將位於中心。

我在這里更新了你的代碼： http ： //jsfiddle.net/robknight/Zn4vB/5/

Answer 4

你可以使用transform來解決這個問題

 div
{
    display:inline-block;
    width: 20px;
    position:relative;
    height:100px;
    border-style:solid;
    text-align:center;
}
span
{
    background-color:pink;
}
.north
{
    position:absolute;
    top:0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.south
{
    position:absolute;
    bottom:0;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}