如何使用保證金中心容器：自動

由於某種原因，margin:auto不起作用。如何使用保證金中心容器：自動

HTML

<body> 
    <div id="background"> 
     <div id="header"> 
      <div id="title">Welcome</div> 
     </div> 
    </div> 
</body>

CSS

#background { 
    min-width: 960px; 
} 

#title { 
    display: block; 
    margin: auto; 
    background-color: blue; 
}

這只是剛剛繪製整個字 '歡迎' 左邊的屏幕頂部的藍線。爲什麼我的margin:auto不工作？

通過邊距水平對中的正確語法是：margin: 0px auto;，因爲這會將左邊距和右邊距設置爲自動。如果使用此方法，則需要在其上設置寬度，因爲默認寬度爲100％。如果您只是將文本居中，則還可以使用。使用text-align:center。

Alternative jsFiddle..我不知道你想達到什麼風格。

2013-09-28 02:17:22

啊，我們走：

.ex2 #header { text-align: left; } .ex2 #title { display: table; margin: 0 auto; background-color: beige; }

在觀看演示。設置寬度做到了，添加0px並沒有改變。但是，無論如何，'標題'的寬度應該是文本的寬度嗎？我怎樣才能使'標題'的寬度成爲文本的寬度？ – user2719875

@ user2719875否 - 默認情況下元素的寬度爲100％，因此您無法居中。 –

hm好的謝謝。 – user2719875

#title div將展開以填充其父項#header，而該父項將擴展爲填充其自己的父項#background，其寬度至少爲960像素。

因此，#title如果是全寬度，所以它居中，默認情況下，文本是左對齊的（至少在西歐語言中）。

如果您希望#title具有縮小到適合的寬度，您可以嘗試display: inline-block。

要將#title水平居中，請將text-align: center添加到其父容器#header。

例如：

#background { 
    min-width: 960px; 
} 
#header { 
    text-align: center; 
} 
#title { 
    display: inline-block; 
    background-color: beige; 
}

或者，也可以實現使用display: table相同的結果：http://jsfiddle.net/audetwebdesign/kAhnx/

2013-09-28 02:21:07

嗯，好的有趣。我怎樣才能使'標題'的寬度的文字寬度，而不是它的父寬度？ – user2719875

'inline-block'顯示類型將（默認情況下）計算縮小以適應內容的寬度。您可以根據需要添加填充和邊框以進行造型。 –

當我內聯顯示並刪除寬度時，它會佔用文本的寬度，這很好。但是，現在它不再集中它了。我現在如何將它居中而不添加width：屬性？ – user2719875

回答