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

Question

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

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

要做到這一點，我想到了在2 <span>使用position:absolute;。

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

如果你不想粉色延長全寬，則必須窩定位跨度中的元素（如跨度），並給該元素的背景顏色，如下所示：http://jsfiddle.net/Zn4vB/6/

Answer 2

你有定位權。但<span>標籤是內嵌元素，所以您需要使它們顯示爲塊級元素display: block;，然後明確聲明它們的寬度爲width: 100%;。

他們將繼承<div>上的樣式規則中的text-align屬性，以使文本位於中心。

我已經更新了你的代碼在這裏：http://jsfiddle.net/robknight/Zn4vB/5/

Answer 3

請檢查這個人是你想要的想法..

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 4

您可以使用轉換來解決這個問題

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%); 
}