關於居中一個div（margin：0px auto; vs display：inline-block等）

注意：這篇文章背後的動機是，完全是爲了更好地理解CSS。 CSS對我來說依然是伏都教（儘管數小時和數小時的學習），而且我肯定不會再尋找更多的巫術（即更多的「變通方法」或「黑客」）。我正在尋找洞察到CSS。關於居中一個div（margin：0px auto; vs display：inline-block等）

我發現了兩種方法將div集中在其容器中。（在本文章中，我會打電話的div爲中心#inner-div）

第一種方法是基於給#inner-div規範margin:0px auto;;第二個在於給予#inner-div規範display:inline-block。

AFAICT，所述margin:0px auto方法也需要顯式設置div的寬度，如在本jsFiddle所示; CSS的鍵位是

#inner-div { 
    margin:0px auto; 
    width:100px; 
}

（要看看會發生什麼，如果省略上面的width規範，請參閱本jsFiddle。）

同樣，AFAICT的display:inline-block還需要1）給予規範text-align:centered到含有#inner-div的元件，和2）防止外來底緣，所述display:inline-block需要爲#inner-div（這可以實現，例如，通過給該規範vertical-align:top到#inner-div和，AFAICT，與display:inline或display:inline-block任何附加的後代）。看到這個jsFiddle，尤其是CSS的下列位：

#outer-div { 
    text-align:center; 
} 
#inner-div { 
    display:inline-block; 
    vertical-align:top; 
}

我覺得這兩種方法有問題。第二種方法顯然是有問題的，因爲display:inline-block給出受影響的div類似文本的語義，導致意想不到的行爲（如上面提到的似乎無償的底部餘量）。

另一方面，第一種方法需要規定#inner-div的寬度。這排除了以#inner-div的內容的寬度暗示含有的這個寬度的可能性。我不喜歡這樣：我經常需要以divs爲中心，即使在運行時，我的寬度也很難確定（例如，這個寬度可能取決於字體度量，或者流程在#inner-div等內部運行的方式等））。畢竟，作爲jsFiddle在本次發佈會上給出的結果，瀏覽器已經根據其內容計算了#inner-div的height（IOW，沒有必要明確指定#inner-div的高度，以便瀏覽器做正確的事情）。爲什麼瀏覽器不能計算#inner-div的寬度？

在我看來，任何合理的佈局系統都可以讓人對瀏覽器說：「根據其內容的寬度計算出此div的寬度，並將它居中放置在其容器中」。

我的問題有兩個部分：

我正在尋找一個消息靈通的確認該CSS 真的不提供任何辦法直接在瀏覽器來計算div的寬度（根據其內容），然後在其包含的元素中心說div;和
如果最後一個問題的答案是「是」，這是否僅僅是由於CSS創建者的設計不佳，還是CSS不支持這種自然的一個很好的理由（對我來說最少）功能？

注意：這些是疑難問題;第二，特別是，不僅需要CSS標準的命令，還需要了解CSS本身的設計：非常高的順序！

來源

2013-11-01 kjo

如果我有更多的時間，我會回到這個問題，但我會指出'div'是一個塊級元素。因此，其默認行爲將確保其寬度將展開以填充其父寬度。這與'height'的行爲完全不同，它會擴展到它可以容納它的子元素的地步，這聽起來就像是'width'的行爲。不幸的是，這不能用CSS直接完成。 –

如果你認爲這是不自然的，你應該已經看到我們必須做什麼來混合我們的風格中的相對和絕對單位，然後才能使用「box-sizing」:) –

如果沒有給定的寬度，瀏覽器將如何知道如何計算流動環繞？很高興告訴瀏覽器「讓它看起來不錯」，但它們並不那麼聰明。儘管我感到你的痛苦;具有溢出膨脹的固定最小寬度將使生活更容易。

將寬度設置爲頁面寬度的百分比或使用腳本動態設置寬度如何？

我同意將div設置爲行內塊/表格單元格/不管引入比它值得的更多麻煩。

BTW「margin：auto;」就足夠了，「margin：0px auto;」似乎矛盾。

來源

2013-11-10 15:33:33

關於居中一個div（margin：0px auto; vs display：inline-block等）

回答

相關問題