html - 水平 CSS 对齐

Question

有人可以解释我如何将按钮保持在红色区域的中心，无论按钮的宽度如何？

这是我的演示：http: //jsfiddle.net/v3X2k/

这是我的代码：

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test</button>
        <button>Test 2</button>

    </div>

</div>

<hr />

<div style="width:660px;height:40px;display;block;background:red">

    <div id="wrapper3" style="margin:0 auto;width:160px">

        <button>Test Test Test Test Test Test</button>
        <button>Test 2</button>

    </div>

</div>

您可以在第二个示例中看到，第二个按钮位于下方，而实际上我希望它们保持内联，就像上面的那样。

我很高兴放弃该width:160px声明，但只需将这些按钮集中对齐即可。

有任何想法吗？

非常感谢 ：）

Answer 1

您不必使用具有固定宽度和边距自动的包装 div ...只需text-align: center;在容器 div 上使用

演示

Answer 2

text-align: center;

按钮是内联元素，所以这将起作用。

jsFiddle

Answer 3

有些人称之为不好的做法，我想你必须小心，但你可以使用：
<center></center>

（躲在角落里）不要因为我的建议而否决我。