Button not getting centered-CodePudding

Soo, after god knows how many attempts, my button won't align to the center at all!

.button {
    width: 340px;
    height: 70px;
    background-color: #84705C;
    font-family: 'Fredoka', sans-serif;
    border-radius: 8px;
    border: 0px;
    font-size: 50px;
    color: #FFFFFF;
    text-align: center;
    animation-name: buttonoutofhover;
    margin: auto;
    display: inline-block;
}

I have also tried margin-left and margin-right as a way to set auto. Any help please? I just used basic tags. If it works for your code then sorry for the wasted time, but it seems like it doesn't for mine.. (also tried with and without animation, same thing)

CodePudding user response：

You could wrap the button inside another div: e.g. "button-wrapper". Apply "display: flex" to this wrapper and then use "margin-left: auto, margin-right: auto" on the button class.

Also make sure your button has a class of "button", since you refer to a class instead of html element inside your css file. Checkt out the code snippet below:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <style>
      .button {
        width: 340px;
        height: 70px;
        background-color: #84705c;
        font-family: "Fredoka", sans-serif;
        border-radius: 8px;
        border: 0px;
        font-size: 50px;
        color: #ffffff;
        text-align: center;
        animation-name: buttonoutofhover;
        margin-left: auto;
        margin-right: auto;
      }
      .button-wrapper {
        display: flex;
      }
    </style>
    <div >
      <button >Button</button>
    </div>
  </body>
</html>

CodePudding user response：

So if you want to do that just use a display grid with placing the item in the center. Just short and simple.

.button {
    width: 340px;
    height: 70px;
    background-color: #84705C;
    font-family: 'Fredoka', sans-serif;
    border-radius: 8px;
    border: 0px;
    font-size: 50px;
    color: #FFFFFF;
    text-align: center;
    animation-name: buttonoutofhover;
    margin: auto;
    display: grid;
  place-items: center;
}

<div ></div>