• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • 2 Ways To Display 3 Buttons Inline

Reader Interactions

Comments

  1. BeckyBruso says

    December 19, 2016 at 5:58 pm

    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,

    Log in to Reply
    • Brad Dalton says

      December 20, 2016 at 1:39 am

      This might help

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.