動態中心對齊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;">

演示

注意：確保使用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

你可以簡單地指定text-align：center; div的風格。

在這里，代碼供您參考。

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>

div中具有類'row'的任何元素都將居中對齊。