如何让一个按钮元素在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

回答