Centering a button in html

Question

I am trying to place a button in my blogger post. I have designed the button, but i am unable to center it properly on the page.

How i do center this button?

<html>
  <head>
    <style>
      .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h2>Buttons</h2>

     
    <a class="button" href="#">Link Button</a>
    <button class="button">Button</button>
  </body>
</html>

Does this answer your question? [How to center a button within a div?](https://stackoverflow.com/questions/7560832/how-to-center-a-button-within-a-div) — Mitya, Jul 19 '20 at 13:06

score 1 · Accepted Answer · answered Jul 19 '20 at 13:06

1

Use margin: 0 auto; in a parent element.

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

body {
  text-align: center;
}

<h2>Buttons</h2>


<a class="button" href="#">Link Button</a>
<button class="button">Button</button>

answered Jul 19 '20 at 13:06

jbutler483

24,074
9
92
145

Wrap your buttons in a div element which has 100% width and `text-align:center`. – jbutler483 Jul 19 '20 at 14:00

Centering a button in html

1 Answers1