在表单中居中按钮答案

【问题标题】：centering buttons in a form在表单中居中按钮
【发布时间】：2013-04-09 06:24:28
【问题描述】：

我想在一个表单中居中两个按钮。我在它们周围有一个包装器 div 并尝试了 margin: 0 auto 和 float: left，但它不起作用。

.button_container {
width: auto;
min-width: 834px;
margin: 0 auto;
float: left;
}

FIDDLE

如果按钮在文本区域下方居中就完美了。这可能吗？

更新：

谢谢大家，我使用了 Sachins Fiddle，因为它最适合我的情况。

WORKING FIDDLE

【问题讨论】：

标签： jquery css forms center

【解决方案1】：

Fiddle

这个作品不错

.button_container {
    width: 100%;
    margin: 0 auto;
    text-align:center;
}

另一种风格： Fiddle

 .box_wrapper {
    margin: 0 auto;
    height: auto;
    width: 325px;
    padding: 15px;
    background: #ccc;
}

【讨论】：

这正是我在回答中所说的。

【解决方案2】：

你需要做几件事，比如删除float:left，添加text-align:center，最重要的是删除min-wdith，因为它强制使容器的宽度无法居中对齐。

.button_container {
    width: 100%;
/*  min-width: 834px;*/
    margin: 0 auto;
    text-align:center;
}

JS Fiddle Example

【讨论】：

【解决方案3】：

好吧，我不能说我赞成使用<table>，但是现在要进行更改需要大量工作，所以您不妨使用它。只需添加另一行包含按钮即可。

<tr>
    <td>&nbsp;</td>
    <td>
        <button name="submit" class="submit_btn" type="submit">Absenden</button>&nbsp;
        <button name="reset" class="submit_btn" type="reset">Zur&uuml;cksetzen</button>
    </td>
</tr>

这对我来说看起来不错，但您也可以将填充留到第二个<td>。

http://jsfiddle.net/ExplosionPIlls/LerVW/2/

【讨论】：

【解决方案4】：

如果您希望按钮在textarea 下方居中，您可以做的一件事是将您的button_container 移动到桌子上的新行...

演示：http://jsfiddle.net/darkajax/WFh9S/

【讨论】：

【解决方案5】：

将text-align:center; 添加到.button_container 使其成为：

.button_container {
width: auto;
min-width: 834px;
margin: 0 auto;
float: left;
text-align:center;
}

这将使按钮容器内的所有内容居中，使您的按钮按需要居中。

【讨论】：

【解决方案6】：

试试这个：

.button_container {
    width: auto;
    min-width: 834px;
    margin: 0 auto;
    border:1px solid red;
    text-align:center;
}

添加边框只是为了说明 DIV 大小。

http://jsfiddle.net/LerVW/3/

【讨论】：

你怎么看？它在 div 中居中。我不确定您使用的是什么浏览器，但我刚刚在 Chrome、FF 和 IE10 中检查过。如果您要对我投反对票并发表评论，至少要使其具有建设性。
不，不是因为最小宽度。 jsfiddle.net/AgrP8/3 在 div 中居中。
实际上它在 div 中居中。该 div 的最小宽度恰好是 834px，因为这就是他设置的。如果他想删除，他可以。