56

我不想将 CSS 添加到我的 div 元素（例如<div style="text-align: center;">）。

我只想将 CSS 代码添加到按钮元素。

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

在这种情况下，如何将按钮水平居中？

4

3 回答 3

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


button {
  margin: 0 auto;
  display: block;
}
<div>
  <button>Button</button>
</div>

于 2013-03-08T17:54:59.197 回答
6

其他人已经提到了这个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-08T18:03:42.923 回答
5

你需要display: block; margin: auto;在<button>. jsFiddle

于 2013-03-08T17:55:31.493 回答