How to center a s2M button?

#1

I am using shortcodes to create buttons but i would like those buttons to be centered on my page. The problem is that in the WP editor, even if i center or add

, the button is still not centered. It is probably a simple trick but i can’t get it.

Here is a page i am currently working on, where the button shows on the left (at least on my computer where i am using Chrome).

http://scrapbookcampus.com/promo/calendar-challenge-2016/

Any suggestion?

#2

Carole: you need to add the following to your CSS:

To the input element itself: display: inline-block;

To its parent form element: text-align: center;

#3

This might sound silly but i have no idea how to edit the CSS in my theme (Headway), and also, why doesn’t the button get centered with “normal” ways, like everything else in the page?

#4

I don’t know what you mean by “normal” ways, Carole. I always use CSS.

In any event, you shouldn’t edit the theme directly. I don’t know how Headway works but, if you have a child theme, you can edit its style.css file. Otherwise, I’d suggest using the Simple Custom CSS plugin.

#5

Since that shortcode is simply in the text editor of WP, the “normal way”, for me, is to highlight the section i want to center, and click the Center icon in the tool bar. The rest of the text WAS centered correctly. Why not the shortcode?

This is what i have:

[s2Member-PayPal-Button level="*" ccaps="calendar2016" desc="Calendar Challenge" ps="paypal" lc="" cc="USD" dg="0" ns="1" custom="scrapbookcampus.com" ra="10" rp="1" rt="L" rr="BN" image="http://scrapbookcampus.com/wp-content/uploads/2016/11/JoinNow-350.png"/][/s2If]

Shouldn’t that center the button?

#6

No idea. What you are describing is something peculiar to Headway. It’s not how WordPress works at all.

To be honest, I hate themes and frameworks that try to do their own thing, because they confuse users into thinking everything works like that. The truth is that nothing else does.

It would be much simpler just to learn CSS.

#7

Hi Carole,

You need to open Headway’s Visual Editor. Go to the Design mode, and then, at the top, right next to “Snapshots”, there’s the icon for the Live CSS Editor. There you can place your CSS.

By the way, I would start thinking about alternatives to Headway sooner or later, because they seem to go out of business/don’t answer support tickets anymore. Just search about it on WPTavern.