centering a button using css

Question

I am having trouble centering my button and don't know why its not working.

here is the html and the CSS.

.button {
  margin:auto;
  display: inline-block;
  height: 100px;
  width: 300px;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 20px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

<a href="blabla.html" class="button"  style= "text-align: center"> Start Game</a>

why didn't you **google** this? it's the most frequently asked question in CSS, the very basic thing. — vsync, May 01 '16 at 14:43

Roko C. Buljan · Answer 1 · 2016-05-01T14:46:48.907

On the parent that contains the button set

text-align: center;

Like:

.button {
  white-space: nowrap;
  display: inline-block;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 40px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

/* HELPER CLASSES:*/
.text-center{text-align:center;}

<p class="text-center">
  <a href="blabla.html" class="button"> Start Game</a>
</p>

And remove width and height from your button - will make things easier.

score 1 · Answer 2 · answered May 01 '16 at 14:45

1

Centering inline elements and block elements are done differently.

In your case, you tried to use margin: auto which is for centering block elements, but you set the button to inline-block. Simply change the button to display: block and you're all done.

.button {
  margin:auto;
  display: block;
  height: 100px;
  width: 300px;
  background: #00007f;
  border: 2px solid rgba(192, 192, 192, 0.59);
  border-radius: 50px;
  padding: 15px 20px;
  color: rgba(172, 172, 172, 0.55);
  font: bold 3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  box-shadow:0 4px 0 #ACACAC;
}

a.button {
  text-decoration: none;
}

<a href="blabla.html" class="button"  style= "text-align: center"> Start Game</a>

answered May 01 '16 at 14:45

Narxx

7,929
5
26
34

it's a bad idea to use `block`. It forces you to use a fixed width which just complicates designing. The button context should dictate the width. – Roko C. Buljan May 01 '16 at 14:48
1

@RokoC.Buljan There is already a fixed size to that element. Why fight it? If this is the design, there is nothing wrong with keeping the anchor with that property. Design could have various constrains I am not aware of (for instance, all buttons must have a fixed size, due to inner consistency in design). – Narxx May 01 '16 at 14:55

centering a button using css

2 Answers2