如何讓一個按鈕元素在div元素的中心對齊中水平顯示？

<div> 
    <button>Button</button> 
</div>

我不想爲div元素添加CSS代碼。所以<div style="text-align: center;">是不是我想要的。我只想將CSS代碼添加到按鈕元素。我不想添加JS代碼。可以使用CSS3。謝謝！如何讓一個按鈕元素在div元素的中心對齊中水平顯示？

2013-03-08 weilou

button { 
    margin:0 auto; 
    display:block; 
}

2013-03-08 17:54:59 j08691

如果你在現實世界中使用這一點，你需要增加的特殊性，除非你想爲中心到處都是按鈕元素。 – 2013-03-08 17:55:50

我有個問題。塊元素將使用其父元素的完整寬度。請參閱http://jsfiddle.net/xmpDD/1。爲什麼不按鈕元素使用div元素的全寬。我們得到的事實是，按鈕元素的寬度是54像素。我無法理解這一點。謝謝！ – weilou 2013-03-08 18:01:10

實際上是否需要'0'？ 'margin：auto;'似乎適用於FF，IE和Chrome。 – 2015-05-06 00:52:46

您需要display: block; margin: auto;在<button>。 jsFiddle

2013-03-08 17:55:31 dezman

我有問題。塊元素將使用其父元素的完整寬度。請參閱http://jsfiddle.net/xmpDD/1。爲什麼不按鈕元素使用div元素的全寬。我們得到的事實是，按鈕元素的寬度是54像素。我無法理解這一點。謝謝！ – weilou 2013-03-08 18:01:39

@weilou實際上，塊級元素不一定會獲得父級的寬度。它們的組合寬度，邊距和填充等於其父項的寬度。希望它有幫助！ – 2013-03-08 18:06:45

非常感謝！菲利普。您的評論可以幫助我！ – weilou 2013-03-08 18:12:23

其他人已經提到的margin: 0 auto;方法，但是如果你想要一個解釋，瀏覽器在任何容器中的元素是分裂了可用空間。

另外需要指出的是，你可能會需要給你的元素一個寬度，這樣才能正常工作。

因此，總體而言：

button { 
    display:inline-block; //Typically a button wouldn't need its own line   
    margin:0 auto; 
    width: 200px; //or whatever 
}

2013-03-08 18:03:42

回答