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;
}
Was This Tutorial Helpful?