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

您可以添加:

#mainCalc {
  text-align: center;
}

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

Demo