How To Centre a Button

This tutorial provides a quick tip for a member who needed to know:

I’ve applied a buy-now class to the button on this page but I can’t seem to get it to center. I made it an inline-block so it didn’t stretch the whole width of the column but I can’t center it no matter what I do.

Here’s one example of HTML you can add to your editor to create a button or make any link into a button:

You could also use HTML like this:

Once you paste the HTML for your button, you can then add the following CSS to the end of your child theme’s style.css file to centre it:

.center-button {
    display: table;
    margin: 0 auto;
}

This solution assumes the following CSS is used for your buttons:

.button {
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 3px;
    color: #000;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.625;
    padding: 16px 32px;
    text-align: center;
    white-space: normal;
    width: auto;
}

.button:hover {
    background-color: #000;
    color: #fff;
}

Related Tutorials

• 2 Ways To Display 3 Buttons Inline