How do I center or justify buttons in a div?

Question

I'm creating a div with a bunch of buttons inside

<div>
    <button>a</button><button>b</button>
</div>

I want the buttons to appear justified or centered in the div. There will be several rows of buttons and they should essentially look like text but be centered/justified.

Something like that ? http://jsfiddle.net/vd7xx/ You should draw a picture to show what you need — singe3, Aug 04 '14 at 07:15
Something like this ? http://stackoverflow.com/questions/24245616/vertically-centering-content-in-html/24245798#24245798 — Joffrey Maheo, Aug 04 '14 at 09:43

score 3 · Answer 1 · answered Apr 22 '21 at 08:41

if you need vertically shows this button then you use flex-direction: column; either use flex-direction: row; for Horizontally. and add this properties in your code.

div{
  position:relative;
  display:flex;
  flex-direction: column;
  flex-wrap:wrap;
}

button{
  display:block;
  padding:1rem 2rem;
  background:#d0333a;
  margin-bottom:.5rem;
  text-align:center;
  border: none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
}

<div>
  <button>a</button><button>b</button><button>c</button><button>d</button>
</div>

Leo · Answer 2 · 2014-08-04T08:48:46.623

2

Use this,

<button style="margin: 0 auto; display: block;">a</button>
<button style="margin: 0 auto; display: block;">b</button>

edited Aug 04 '14 at 08:48

answered Aug 04 '14 at 07:20

Leo

5,017
6
32
55

1

margin:auto won't do anything if you don't specify a width – singe3 Aug 04 '14 at 07:37
Thanks for the suggestion but it is actually working. – Leo Aug 04 '14 at 08:46
You can check this: http://jsfiddle.net/L8u34/... with and without using margin:auto. – Leo Aug 04 '14 at 09:07

score 1 · Answer 3 · answered Aug 04 '14 at 07:15

1

You can use the CSS property

text-align: center;

This can be used to center all inline elements, like button, text, etc...

answered Aug 04 '14 at 07:15

tomaoq

3,028
2
18
25

score 0 · Answer 4 · answered Aug 04 '14 at 07:14

0

just use text-align:center

<div style="text-align:center">
    <button>a</button><button>b</button>
</div>

Regards, Nimesh P.

answered Aug 04 '14 at 07:14

Nimesh07

362
3
5

score 0 · Answer 5 · answered Aug 04 '14 at 07:23

0

<style>
div{
   text-align: center;
}
</style>

It will do ...

answered Aug 04 '14 at 07:23

Mad Angle

2,347
1
15
33

score 0 · Answer 6 · answered Aug 04 '14 at 07:23

0

If you have button as block element or any other block element you can do it like this:

<div class="container">
    <button>button</button>
</div>

and css

.container { width: 100%;}
.container button { display: block; margin: 0 auto;}

answered Aug 04 '14 at 07:23

Denc

31
1
3

score 0 · Answer 7 · answered Aug 04 '14 at 07:26

Demo

html

<div>
    <button>a</button><button>b</button><button>c</button><button>d</button><button>e</button><button>f</button><button>g</button><button>h</button>
</div>

css

div{
    text-align: center;
}
button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
}

score 0 · Answer 8 · answered Aug 04 '14 at 08:23

To align buttons horizontally and vertically centred apply the following to the parent div

html

<div id = "parent_div">
 <button>a</button>
 <button>b</button>
 <button>c</button>
</div>

css

#parent_div {
 width:200px;
 height:200px;
 border:solid 1px blue;
 display:flex;/*Requires vendor prefixes*/
 justify-content:center;/*Requires vendor prefixes*/
 align-items:center;/*Requires vendor prefixes*/
}

DEMO

Remove justify-content and align-items to remove vertical and horizontal alignment.

Read This:FLEX

How do I center or justify buttons in a div?

8 Answers8