以表格为中心的按钮

Question

我想在表单中居中两个按钮。我在它们周围有一个包装器div并尝试了保证金：0 auto和float：left，但是它没有用。

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

FIDDLE

如果按钮位于textarea下面，那将是完美的。这可能吗？

更新：

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

WORKING FIDDLE

Answer 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;
}

Answer 2

将text-align:center;添加到.button_container制作：

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

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

Answer 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/

Answer 4

如果您希望按钮位于textarea下方，可以执行的一件事是将button_container移动到桌面上的新行...

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

Answer 5

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

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

JS Fiddle Example

Answer 6

试试这个：

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

简单地添加边框以说明DIV尺寸。

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