Button not getting centered

Question

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)

PS: just tried again in a blank HTML page, still the same thingie. And aswell removed the display: inline-block since it was not needed. — Bingus My Beloved, Mar 18 '22 at 16:39
Is that you want to center it on particular div or just page — ash, Mar 18 '22 at 16:45

score 2 · Accepted Answer · answered Mar 18 '22 at 16:45

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 class="button-wrapper">
      <button class="button">Button</button>
    </div>
  </body>
</html>

Even in the preview it worked, thank you very much, seems like it worked! — Bingus My Beloved, Mar 18 '22 at 20:59

score 1 · Answer 2 · answered Mar 18 '22 at 16:46

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 class="button"></div>

Thank you a lot, this worked perfectly and so has the option below, thank you =) — Bingus My Beloved, Mar 18 '22 at 20:56

Button not getting centered

2 Answers2