如何使用div中心按鈕？

我有以下代碼，我試圖將div中的所有輸入居中。如何使用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>

來源

2013-04-01 user2101459

難道我的答案的工作？請打勾/ upvote如果是，讓其他人知道。否則，讓我知道如果沒有，所以我可以刪除它！謝謝 – lifetimes

您需要給輸入的寬度，然後你需要刪除浮動並添加邊距：0自動。

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

工作例如：

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

來源

2013-04-01 21:37:47

margin-left: auto; 
margin-right: auto;

來源

2013-04-01 21:39:02

這個平面不會工作。 –

我剛剛用我的代替了您的保證金行，這是相同的。 –

這不是問題的緣由。除非你設置某種寬度，否則這些元素不會居中。 –

您可以添加：

#mainCalc { 
    text-align: center; 
}

，並清除float: left;從#mainCalc label & #mainCalc input

Demo

來源

2013-04-01 21:40:15 DarkAjax

這是很好的建議，謝謝！ – user2101459

@ user2101459好極了！記住它總是很好的投票答案，幫助你... – DarkAjax

@ user125697哇真的哥們，那太糟糕了。這些情況應該真的改變...... – DarkAjax

如何使用div中心按鈕？

回答

相關問題