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自动。

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

工作示例：

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

Answer 2

您可以添加：

#mainCalc {
  text-align: center;
}

从float: left;＆amp;移除#mainCalc label #mainCalc input

Demo

如何使用div对中按钮？

2 个答案: