不應該「text-align：center;」應用於絕對定位的元素，對其子元素不做任何事情？

Question

我會讓你第一眼看到的代碼，然後告訴你，我的問題是什麼：

Tinkerbin：http://tinkerbin.com/x8iGCFsZ

<style> 
    div.container{ 
    height: 200px; 
    width: 200px; 
    background-color:red; 
    margin-top: 10px; 
    } 

    div.subContainer{ 
    position: relative; 
    text-align: center; 
    } 

    div.inner{ 
    position: absolute; 
    background-color:yellow; 
    width: 150px; 
    } 
</style> 

<div class="container"> 
    <div class="subContainer"> 
    <div class="inner">bananas for breakfast</div> 
    </div> 
</div> 

那麼，根據教科書，text-align: center;，當應用於父元素，如果他們的子元素只有display: inline;，那麼它只會集中它。

因此，正如你所期待，因爲<div>具有默認的顯示設置爲阻止（display:block;）應用於父div.subContainer的text-align: center;沒有做任何事情到其子div.inner。

一切都很好。沒有什麼奇怪的。當我嘗試.inner元素上使用<span>，而不是<div>

我的問題引起的，我定位它絕對（position: absolute;）—其中，因爲你知道力的變化顯示，從默認的內聯，以阻止。

請看：

<style> 
    div.container{ 
    height: 200px; 
    width: 200px; 
    background-color:red; 
    margin-top: 10px; 
    } 

    div.subContainer{ 
    position: relative; 
    text-align: center; 
    } 

    span.inner{ 
    position: absolute; 
    background-color:yellow; 
    width: 150px; 
    } 
</style> 

<div class="container"> 
    <div class="subContainer"> 
    <span class="inner">bananas for breakfast</span> 
    </div> 
</div> 

會發生什麼情況是怪異。儘管有塊的強制顯示值（感謝position: absolute;），跨度仍然居中。而且更重要的是，居中實際上很奇怪。它將塊的左側並與包含元素的中心對齊，而不是像往常一樣將兩個中心對齊。

行爲是固定的—開始時像一個塊—，當我手動設置span.inner阻止顯示。

span.inner{ 
    position: absolute; 
    display: block; 
    background-color:yellow; 
    width: 150px; 
} 

那麼，這裏發生了什麼？絕對定位不是強制改變顯示器以阻止？爲什麼中心奇怪？

Answer 1

當您將其設置爲position: absolute時，它確實成爲一個塊，但它將從原本出現的點中移除。由於您沒有使用top，left，bottom和right，這更明顯。

使用<div>時：默認情況下，除法是塊級別，並佔用整個寬度。因此，默認情況下，它將從框左側開始並向右擴展。定位這絕對會保持在它的左上角原來出現，唯一明顯的區別是盒子的寬度。

當使用<span>：一個跨度，默認情況下，是其由text-align屬性影響的它的父一個內嵌元素。文本光標從元素的中心開始，並且當輸入文本時，字符被添加並重新居中以適應文本的寬度。當您從流程中刪除跨度時，它將從文本開始的位置開始。文本光標位於元素的中心（水平方向），因爲現在在實際父項中沒有文本。

你已經找到了解決辦法：增加display: block將迫使元素實際上是一個塊級元素。事情是，只是因爲position: absolute「強制」此屬性，它不是實際屬性，只有計算該元素的值爲。這就是說，只有當它在CSS定義中顯式設置時纔會應用到元素的位置。