2

I am trying to center a button without a div. The button is as follows

<body>
  <button>Some Text</button>
</body>

I have tried using a few different techniques such as:

text-align: center

and 

margin:0 auto;

but these don't work.

maudulus
  • 10,627
  • 10
  • 78
  • 117

4 Answers4

8

Its simple, just make it display as a block element:

<body>
  <button>Some Text</button>
</body>

button {
    display: block;
    margin: 0 auto;
}

http://jsfiddle.net/df216mho/

taxicala
  • 21,408
  • 7
  • 37
  • 66
  • This behaviour is really counterintuitive – Brewal May 11 '15 at 15:25
  • I expect a `display: block` element to use the full width of its container – Brewal May 11 '15 at 15:27
  • Exactly, you are telling the button to use the full width of its container, body in this case, and get auto margins. – taxicala May 11 '15 at 15:28
  • 1
    Can you explain why this works for a ` – hungerstar May 11 '15 at 15:29
  • 1
    I'm saying that this behaviour is specific to the `button` element. If you try this with a `div` (again without specifying its width), you will see it would take the whole width – Brewal May 11 '15 at 15:29
  • I'm assuming the ` – hungerstar May 11 '15 at 15:31
  • 1
    Ok. I found this interesting : http://stackoverflow.com/questions/27605390/why-doesnt-display-block-width-auto-stretch-a-button-to-fill-the-contai – Brewal May 11 '15 at 15:34
  • @Brewal that seems to confirm my assumption that they are calculated for the element. – hungerstar May 11 '15 at 15:37
  • 1
    Yes. Anyway @taxicala, IMO, this should be mentionned in this answer because of the specificity. – Brewal May 11 '15 at 15:39
4

Try this (You dont need a extra div or set a width)

CSS

button{
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}

DEMO HERE

Luís P. A.
  • 9,524
  • 2
  • 23
  • 36
1

Use this. It works:

<body>
  <button style="position: relative; left: 50%;" >Some Text</button>
</body>

I used inline CSS since its easier to show on here.

kamal
  • 195
  • 2
  • 9
  • This is close, but not 100%. This solution does not take into account the width of the button. This will move the left edge of the button to the center rather than the center of the button to the center. – hungerstar May 11 '15 at 15:23
  • if the button is wide enough, it will not be centered, only the pivot point of the button will start at the center. – taxicala May 11 '15 at 15:24
0

If you use a set width then margin: 0 auto; will work.

button {
    display: block;
    margin: 0 auto;
}

The reason you do not need to set a width for a <button> with margin: 0 auto; when you also set it to display: block; is that a <button> is a replaced element. Basically they are elements that have a predetermined width and height without the use of CSS.

Checkout this SO answer provided by @Brewal for a few more details.

Community
  • 1
  • 1
hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • What happens if the text of the button is wider than the button itself? this wont work – taxicala May 11 '15 at 15:24
  • So, depending on the text of the button, you will have to adjust the width of it? or create extra classes for each button depending on the width? – taxicala May 11 '15 at 15:27