CODEWITHSUNDEEP
htmlcssbuttoncenter
ChandlerQ
ChandlerQ

Reputation: 1438

How to center a fixed-width button horizontally?

I have a button whose width is always 50px. How can I keep it center in the parent div horizontally?

Upvotes: 1

Views: 3341

Answers (3)

hasse
hasse

Reputation: 903

What is positioned relative? The button(/div)?

It doesn't matter if it is a button or a div, just give the div class="button", and then you will get the styles.

When you know the exact width of the button, there is also the possibility to position it absolute, but that includes ripping it out of the normal flow (and that might not be what you want).

<div style="position:relative">
    <button style="width:50px;position:absolute;left:50%;margin-left:-25px;">Btn</button>
</div>

Depending on what you are trying to obtain, I think I would go for the display:block;margin:auto;

I have forked Hirals fiddle here: http://jsfiddle.net/LRBvT/

Upvotes: 1

codingrose
codingrose

Reputation: 15709

Make alignment of parent div center.

HTML:

<div class="parent">
    <input type="button" class="button" value="Btn"/>
</div>

CSS:

.parent{text-align:center;}
.button{width:100px;}

Fiddle here.

Upvotes: 3

Pat Dobson
Pat Dobson

Reputation: 3299

Add 

display: block;
margin: 0 auto;

That should do it . . .

Upvotes: 1

Related Questions