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;
}
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,
This might help