html - 如何使用 div 居中按钮？

Question

我有以下代码，我试图将所有输入集中在 div 中。

以下是 CSS 片段：

#mainCalc label {
    display: inline;
    width: 8em;
    text-align: right;
    padding-right: 1em;
        float: left; }

#mainCalc input {

    display: inline;         
    float: left; }

#mainCalc br {
    clear: left; 

这是 HTML 片段：

<div id="mainCalc">
  <input type="button" id="dollar" value="Dollar" />
  <input type="button" id="quarter" value="Quarter" />
  <input type="button" id="dime" value="Dime" />
  <input type="button" id="nickel" value="Nickel" />
  <input type="button" id="refund" value="Refund" /><br />
  <label for="amount">$</label>
  <input type="text" id="amount" /><br/>
  <input type="button" id="coke" value="Coke" />
  <input type="button" id="dietCoke" value="Diet Coke" />
  <input type="button" id="mountainDew" value="Mountain Dew" />
  <input type="button" id="drPepper" value="Dr. Pepper" />
  <input type="button" id="rootBeer" value="Root Beer" />
  <input type="button" id="water" value="Water" /> <br /><br />
</div>

Answer 1

您需要给输入一个宽度，然后您需要删除浮动并添加边距：0 auto。

input{
width: 200px;
margin: 0 auto;
display: block;
}

工作示例：

http://jsfiddle.net/DYgnU/2/

Answer 2

你可以加：

#mainCalc {
  text-align: center;
}

并float: left;从#mainCalc label&中删除#mainCalc input

演示