htmlcssbuttonalignmentcenter

I would like to horizontally align buttons and center them with css

I'm trying to align 4 buttons horizontally in the center top of the page with css. this is what I have

button {
  background-color: rgb(243, 243, 243);
  border: 5px;
  color: #000000;
  padding: 15px 32px;
  text-align: center;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  cursor: pointer;
  display: block;
  margin: auto;
}

whenever i do this, the buttons get align in the center but also vertically, they should be horizantaly. I already tried this:

display: inline-block; instead of display: block;

but then my buttons become aligned horizonatlly but not center on top of my page.

Solution

  • The best way to do that is with a text-align in the container, like this:

    .container {
  text-align: center;
}

     <div class='container'>
      <button>MyBtn1</button>
      <button>MyBtn1</button>
      <button>MyBtn1</button>
 </div>