动态地将按钮在 div 中居中对齐？

Question

中可能会有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个按钮的情况则无法正常工作。如何在不指定宽度的情况下居中对齐？请帮忙。

- OCJP

Answer 1

你需要在容器元素上使用text-align: center。此外，避免使用内联样式...

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

演示

注意：如果您的 div 中有文本，请确保使用 text-align: left;，否则它们也会居中。

---

正如你所评论的那样，对我来说它看起来像是居中的

---

您仍然不相信它们完美地居中，我会调整容器的 width 并向您展示它们是如何居中的...

带有2个按钮

注意：确保您也使用了 CSS Reset... 这样您就可以在所有浏览器中获得一致的样式，尽管无论如何都应该居中。

- Mr. Alien

---

实际上，我受到了外部CSS影响我的当前代码的困扰。谢谢您的回复。也许这就是我认为的原因。 - OCJP

Answer 2

如果您的div中只有按钮，则应该给div设置text-align:center属性。这样，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>

- Ankur Aggarwal

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/

- user3300937

Answer 4

你能使用下面的代码并让我知道吗？只需使用文本居中对齐。

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

- DevelopmentIsMyPassion

---

宽度属性不允许在所有情况下都精确居中。 - OCJP

对我来说，即使我使用1、2或3个按钮，它看起来仍然居中。 - DevelopmentIsMyPassion

使用text-align:center并添加背景颜色 - 对我来说似乎很居中：http://jsfiddle.net/jennift/eK22Y/2/ - Jennift

对于四个按钮的情况，如果通过动态场景将按钮减少到2个，则它不会完全居中。 - OCJP

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>

内的任何元素都将居中对齐。

- Shirish Dhotre