Centering Buttons

[tgolas]

Hello – I’m trying to center a set of buttons in a column. Here’s my shortcode so far:

[button link=”/performances/” target=”_self” color=”purple”] Calendar [/button]
[button link=”/news/” target=”_self” color=”blue”] Latest News [/button]
[button link=”/contact/” target=”_self” color=”yellow”] Contact Us [/button]

I’ve tried a few variations using buttons shortcode (e.g., by adding class=”center” in various places), but haven’t yet been able to center this columns of buttons. Will you tell me what I’m missing?

Thanks.

Topic

[tgolas]

I should have mentioned that this column is Raw Content set up in Builder on the home page.

[Jason Bobich]

Hello,

There’s not going to be anything you could pass into the actual button shortcode to accomplish this. You’d have to do that with CSS. One way you could do it is just to wrap the button in some element that centers it.

<div class="text-center">
[button link="/performances/" target="_self" color="purple"] Calendar [/button]
[button link="/news/" target="_self" color="blue"] Latest News [/button]
[button link="/contact/" target="_self" color="yellow"] Contact Us [/button]
</div>

Or…

<div class="text-center">[button link="/performances/" target="_self" color="purple"] Calendar [/button]</div>
<div class="text-center">[button link="/news/" target="_self" color="blue"] Latest News [/button]</div>
<div class="text-center">[button link="/contact/" target="_self" color="yellow"] Contact Us [/button]</div>

[tgolas]

Ahhh, I was so close, but didn’t quite get it right! Thank you for this. It’s exactly what I needed.

[Author]

Replies