CODEWITHSUNDEEP
htmlcss
skmasq
skmasq

Reputation: 4511

button not centering inside parent div

I'm using margin: 0 auto but the button seems not to respond that and does not center inside div.

Here is 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;
}

Upvotes: 1

Views: 2345

Answers (4)

user3246890
user3246890

Reputation: 139

The simplest answer is not to use CSS. Use the tag in HTML instead.

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

Upvotes: -1

UID
UID

Reputation: 4514

Either give "display:block" to 

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

Fiddle: http://jsfiddle.net/4L3ug/1/

OR

Give "text-align:center;" to :

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

Fiddle: http://jsfiddle.net/4L3ug/2/

Hope this should help!!

Upvotes: 1

Jorge Zuverza
Jorge Zuverza

Reputation: 915

add text-align: center; to .ou. Here:

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

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


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

Upvotes: 3

Dennis Fagan
Dennis Fagan

Reputation: 551

Try adding

display: block;

to the .con button rule http://jsfiddle.net/5PqmV/

Upvotes: 2

Related Questions