html - 如何水平居中固定宽度的按钮？

Question

我有一个宽度始终为 50px 的按钮。我怎样才能让它水平居中在父 div 中？

Answer 1

对齐父 div center。

HTML：

<div class="parent">
    <input type="button" class="button" value="Btn"/>
</div>

CSS：

.parent{text-align:center;}
.button{width:100px;}

在这里拉小提琴。

Answer 2

添加

display: block;
margin: 0 auto;

应该这样做。. .

Answer 3

什么是相对定位？按钮（/div）？

不管是按钮还是div，只要给div class="button"，就可以得到样式。

当您知道按钮的确切宽度时，也可以将其定位为绝对位置，但这包括将其从正常流程中剥离（这可能不是您想要的）。

<div style="position:relative">
    <button style="width:50px;position:absolute;left:50%;margin-left:-25px;">Btn</button>
</div>

根据您要获得的内容，我想我会选择 display:block;margin:auto;

我在这里分叉了 Hirals 小提琴：http: //jsfiddle.net/LRBvT/