[jerkingtonParticipant]

Hey there,

My button won’t center and I’m not sure why. I had this problem before and I entered this CSS
.x-btn-circle-wrap {
display:block !important;
text-align:center !important;
}

And it fixed it. But for some reason, it’s not working anymore. I’ve even wrapped the button in a div align center HTML tag.

The button is on http://www.verysimplemarketing.com. You’ll see it when you scroll down.

Thanks,

Pete

[jerkingtonParticipant]

I’ve been playing around and noticed something strange — when I select the ‘marketing circle’ option the button centers. But when I remove it, it goes back to the left hand side.

[jerkingtonParticipant]

Anywho, never mind. I’ve decided to make the button full width.

[DarshanaModerator]

Hi there,

Thanks for writing in!

Add the following CSS rule into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

.my-button-center{
    display: block;
    margin: 0 auto;
    width: 20%;
}

Then add the class “my-button-center” into your button code (class=”my-button-center”).

Hope that helps!

[WPH2oParticipant]

This fails.

I added this to the customize.php Custom > CSS

.my-button-center {
    display: block;
    margin: 0 auto;
    text-align: center !important;
    float: center; /* the non-existent, and most in demand (and obvious) CSS attribute ever */
}

…and I added the class to the button short code:

<p style="text-align: center;">[button shape="pill" size="x-large" float="none" circle="true" href="#" title="title attribute text" info="tooltip" info_place="top" info_trigger="hover" info_content="hover info content" class="my-button-center"]This is the CTA Button text[/button]</p>

…even with the forced centered paragraph mark up the damn button still floats left.

What can I do?

What if X-Themes offered a CENTER setting in all the options for the shortcodes? THAT would help everyone! 🙂

Thank you,

Chris

[WPH2oParticipant]

I’ve tried adding a width: 100%; to the CSS and it fails.

If I set the width to be 1050px then it centers and stretches the whole button and circle image to fit. However then it’s 100% not responsive.

Because it’s damn near impossible to ever center any shortcode element in WordPress this really would be a wonderful thing to add to all the settings for all the X-Themes shortcodes.

Unfortunately this means that all the marketing buttons I must use must be full width (sometimes that’s ugly, and not what is desired).

Chris

[WPH2oParticipant]

I gave up and added a Callout which has the centering ability!

[callout type="center" title="Callout Title" message="Callout message goes here" button_text="CTA Button Text" button_icon="adjust" circle="true" href="#"]

[LelyModerator]

Hello Chris,

Glad callout is working for you now. Above suggestion should only work if the width attribute is set. You don’t have to set it to definite 1050px but rather you can user percentage like width:50%; so it will still be responsive. If you are willing to try to test the button again give the link with button in it we can check that for you.

Hope this helps.

[WPH2oParticipant]

Hello,

I’m on a new site and WISHING there was a setting in buttons to CENTER them.

Again, I’ve given up and am using the Callout.

Come on guys–add the same left – center – right settings to buttons–it’s the same thing as done on Callout buttons!.

Thanks for listening and improving this one little thing on Button Settings.

Chris

[Rue NelModerator]

Hi Chris,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally. Once our developers have this feature, it will be updated and will be rolled out in our future update release.

Thanks!

[Author]

Posts