CODEWITHSUNDEEP
htmlcssalignment
Josh Wang
Josh Wang

Reputation: 305

How do I center or justify buttons in a div?

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.

Upvotes: 3

Views: 11595

Answers (8)

Ars Khatri
Ars Khatri

Reputation: 44

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>

Upvotes: 3

Leo
Leo

Reputation: 5235

Use this,

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

Upvotes: 2

Sunil Hari
Sunil Hari

Reputation: 1776

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

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 0

Denc
Denc

Reputation: 31

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

Upvotes: 0

Mad Angle
Mad Angle

Reputation: 2330

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

It will do ...

Upvotes: 0

tomaoq
tomaoq

Reputation: 3056

You can use the CSS property

text-align: center;

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

Upvotes: 1

Nimesh07
Nimesh07

Reputation: 362

just use text-align:center

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

Regards, Nimesh P.

Upvotes: 0

Related Questions