按钮不在父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

添加text-align：center;到。你。这里：

.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 2

尝试添加

display: block;

到.con按钮规则 http://jsfiddle.net/5PqmV/

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>