1

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

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

纽扣

小提琴

如果按钮将在文本区域下方居中，那将是完美的。这可能吗？

更新：

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

工作小提琴

4

6 回答 6

2

小提琴

这项工作很好

在此处输入图像描述

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

另一种风格： 小提琴

在此处输入图像描述

 .box_wrapper {
    margin: 0 auto;
    height: auto;
    width: 325px;
    padding: 15px;
    background: #ccc;
}
于 2013-04-08T21:55:26.357 回答
1

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

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

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

于 2013-04-08T21:47:51.990 回答
1

好吧，我不能说我赞成使用<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/

于 2013-04-08T21:48:49.343 回答
1

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

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

于 2013-04-08T21:50:13.407 回答
1

你需要做一些事情，比如 Remove float:left， add text-align:center，最重要的是 remove min-wdith，因为它迫使容器的宽度使它不居中对齐。

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

JS 小提琴示例

于 2013-04-08T21:50:15.077 回答
0

试试这个：

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

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

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

于 2013-04-08T21:48:36.663 回答