1. SP Page Builder 1.x (not supported version)
  2. Tuesday, 10 March 2015
Hello,

the std button is aligned left, though css "pull-right", it can be shown right, but CENTER position is not possible ("text-center";) does not work.
Any other ideas on how to center a button?

Also, when using pull-right, margins do not work, so no way to have a distance from the right end?

Many thanks
Torsten
Responses (7)
Any way to align the buttons centered??
@Toreten

I used: center-block and it made them cntered, unfortunately the button was then full width (not so bad on a feature box)

Bump.

I too would like to center the buttons. It may be a feature of the next release, if so, when will that be?

If not, what is a way I can center them but not make the button full width?

Thanks
Andrew
Bump.

I am SURE this is actually something just about EVERYONE would want. Can I get some confirmation that Joomshaper is looking into it?

It would be great to be able to select alignment center and have the button centered within the column. It's pretty much essential, doesn't look good otherwise.

Andrew
Ok. I finally solved it. I was trying too to simply add something in the CSS Class which would do the trick. In the end I stopped being lazy and added a new class into my custom.css. To be fair. I am no expert at CSS.

Anyway putting the following code in my custom.css and then typing the class into SP Pagebuilder worked:

.mycenter {
margin: 0;
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }


I also wrote a more descriptive article about the process here for those who are new to CSS. Centering buttons in SP Pagebuilder using CSS.
This CSS worked better (see. I told you I was not expert!)

.mycenter {
position: relative;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
Andrew wrote:

This CSS worked better (see. I told you I was not expert!)

.mycenter {
position: relative;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }


Hi Andrew

This hasnt worked for me. I used the code you suggested and put it in my template.css followed the instructions on your blog.

I am using Helix3 and SP Pagebuilder.

Please advise.

Thanks
Abdul
I dropped a button in a row and then changed the content alignment to center. It is now centered. :D easy!

Where ? **** click button setting -> general -> content alignment (choose center) *****


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.