动态中心对齐div中的按钮？

Question

我有一个div，根据不同的场景可以有2个或4个按钮。我希望div内的按钮居中对齐。如何做到这一点。我已在下面提交了我的代码。

<div style="margin: 0 auto; width: 656px;">
    <input type="submit" style="float:left;"  value="Prev"/><input type="reset"  value="Reset" style="float:left;"/>
   <input type="submit"  value="Submit" style="float:left;"/><input style="float:left;" type="submit"  value="Close"/></div>

问题在于显示四个按钮时有效，但不适用于3,2和1按钮情况。如何在不指定宽度的情况下居中对齐？ Plz帮助。

Answer 1

您需要在容器元素上使用text-align: center。另外，请避免使用内嵌样式...

<div style="margin: 0 auto; width: 656px; text-align: center;">

Demo

  

注意：如果您有任何文字，请务必使用text-align: left;   在div之内，他们也将居中。

---

正如你评论的那样，它看起来像是我的中心

---

你还是不相信它们完全居中，我会调整容器width并告诉你它们是居中的......

有2个按钮

  

注意：确保你也使用CSS重置......这样你就可以了   所有浏览器中的一致样式虽然这应该居中   无论重置样式如何。

Answer 2

如果按钮是div中唯一存在的内容，那么您应该将 text-align：center 属性赋予div。有了这个，div内部的所有内容都将对齐，而不是取决于宽度。

<div style="margin: 0 auto; width: 656px;text-align:center;">
<input type="submit" value="Prev"/><input type="reset" value="Reset"/> 
<input type="submit" value="Submit"/><input type="submit" value="Close"/>
</div>

Answer 3

试试这个：

<div style="width:100%"><div style="margin: 0 auto; text-align: center;">
<input type="submit"  value="One"/><input type="reset"  value="Two"/> <input type="submit"  value="Three"/><input type="reset"  value="Four"/></div></div>

http://jsfiddle.net/eK22Y/10/

Answer 4

您可以使用以下代码并告诉我们。刚刚使用了文本对齐中心

<div style="margin: 0 auto; width: 656px; text-align:center">
<input type="submit"  value="Prev"/><input type="reset"  value="Reset"/>

Answer 5

您只需为div指定 text-align：center; 样式即可。

在这里，您可以参考代码。

Style
---------------------
.row { text-align:center; }
.row input { margin:0px 5px; }


HTML
------------------
<div class="row">
   <input type="submit"  value="Prev"/><input type="reset"  value="Reset"/>
   <input type="submit"  value="Submit"/><input type="submit"  value="Close"/>
</div>

具有类'row'的div中的任何元素都将居中对齐。