WP SITES

2768

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

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.

center-button

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

Reader Interactions

Comments

  1. Ok thanks. I was using the built in button code from the theme. I suppose I should create new ones for each of my 3 buttons on the front-page-1. I wanted to show 3 buttons in a row on the desktop and one only on mobile. In this way if I create a new series of buttons, I can use the center code for the mobile version when I make it visible,

Leave a Reply