按鈕沒有父DIV

Question

我使用margin: 0 auto內居中，但是按鈕似乎不迴應這一點，裏面的div沒有中心。

這裏是jsFiddle

HTML：

<div class="ou"> 
    <div class="con"> 
     <button>some</button> 
    </div> 
</div> 

CSS：

.ou{ 
    width: 33%; 
    height: 26px; 
    background: blue; 
} 

.con{ 
    height: 100%; 
    width: 100%; 
} 


.con button{ 
    width: 50px; 
    background: red; 
    margin: 0 auto; 
} 

Answer 1

嘗試增加

display: block; 

到.CON按鈕規則 http://jsfiddle.net/5PqmV/

Answer 2

添加文本對齊：中心;去。在這裏：

.ou{ 
    width: 33%; 
    height: 26px; 
    background: blue; 
    text-align: center; 
} 

.con{ 
    height: 100%; 
    width: 100%; 
} 


.con button{ 
    width: 50px; 
    background: red; 
    margin: 0 auto; 
} 

Answer 3

要麼給 「display:block」 到

.con button{ 
    width: 50px; 
    background: red; 
    margin: 0 auto; 
    display:block; 
} 

小提琴：http://jsfiddle.net/4L3ug/1/

OR

給 「text-align:center;」 到：

.con{ 
    height: 100%; 
    width: 100%; 
    text-align:center; 
} 

小提琴：http://jsfiddle.net/4L3ug/2/

希望這應該幫助！

Answer 4

最簡單的答案是不使用CSS。改爲使用HTML中的標籤。

<div class="ou"> 
    <div class="con"> 
     <center><button>some</button></center> 
    </div> 
</div>