Positioning button

Issue

I was centering the elements of my page with:

display: block;
margin-left: auto;
margin-right: auto;

but when I try to do this with one div that has two buttons they stay in the left corner, why? and how I place them in the center.

Solution

Option 1 If both the buttons are inside the div container you also need to specify the width of the div container, because by default div covers the complete width.

div{
  max-width:10rem;
  margin :0px auto;
}

<div>
  <button>Button1</button>
  <button>Button2</button>
</div>

Option 2 You can also flex the div container to center the buttons

div{
  display:flex;
  align-items:center;
  justify-content:center;
  }

<div>
  <button>Button1</button>
  <button>Button2</button>
</div>

Option 3 You can also use the simple text align center property on the div container so it will center the buttons

div{
  text-align:center;
}

<div>
  <button>Button1</button>
  <button>Button2</button>
</div>

because buttons are inline elements.

Answered By - Vinay Khatri