使用CSS定位固定寬度的元素

我發現了用CSS水平居中固定寬度元素的兩種常見方法，我希望有人能夠幫助我更深入地理解何時可以使用一種技術而不是其他方法。使用CSS定位固定寬度的元素

一種技術涉及使用text-align:center而另一種涉及margin:auto。

下面我已經說明了如何使用兩者來實現相同的目的。看看代碼，很容易說margin:auto方法更全面，但我不禁想知道是否還有其他更好的方法來做這類事情，或者有些情況下可以使用text-align方法是優選的。

你可以看到這裏的示例代碼：http://dabblet.com/gist/1634534或以下：

<div class="wrap1"> 
    <h1>Hey now</h1> 
</div> 

<div class="wrap2"> 
    <h1>Hey now</h1> 
</div>

h1 { 
    background-color: #CCC; 
    width: 200px; 
} 

div.wrap1 { 
    text-align: center; 
    background-color: blue; 
    padding: 5px; 
} 
div.wrap1 h1 { 
    display: inline-block; 
    text-align: left; 
} 

div.wrap2 { 
    background-color: red; 
    padding: 5px; 
} 

div.wrap2 h1 { 
    margin: 0 auto; 
}

來源

2012-01-18 Adam Fraser

我認爲答案是在實現。

裹1使用display: inline-block。通過使它周圍的元素內嵌塊元素與它「內聯」，這意味着它將在同一平面上水平顯示。

Wrap2使用margin: 0 auto和顯示器是default: block。這當然會使元素成爲塊元素，因此它將在視覺上顯示在線上。

結論是，如果您想要將一串內聯對象居中，請使用display: inline-block。如果您正在將一個塊元素居中，則margin: 0 auto解決方案將起作用。

P.S. display: inline-block解決方案也適用於可變寬度元素

編輯：這裏是一個jsfiddle與你的例子，但編輯顯示可變寬度元素和多個內聯元素。

來源

2012-01-18 18:28:45 Michael

我喜歡你的定心多inline-block的元素，因爲這是我居然最近碰到一個案件提。仍然。使用容器上的'text-align：center'感覺不對。看來這種情況下，通過將內聯元素封裝在具有'margin：0 auto'的父元素中可以更好地服務......難以避免「divitis」，但我想不出更好的方法。 – 2012-01-20 00:28:02

注：上述示例涉及固定寬度的元素。 – 2012-01-20 00:29:31