How To Center A Button - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

How To Center A Button

AG

Amar Guillen

SP Page Builder 4 months ago

Hello there,

It could sound like a stupid question but how to center a button?

Here is the test page I work on : https://gpfa99.guillenphoto.com/fr

Scroll down until you find the button labelled 'Button'.

I created a section, a center flex div and the button inside.

I am not able to center it on the page. Please would you help me?

Thanks for your help Sincerely, A. Guillen

0
14 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194761

Hi Amar,

in general, there is option to center Button addon, just scroll settings below "Button Style".

info_2894_2025.gif

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194763

Of course using Custom CSS, you can add the same center effect.

If we talk about button with label "Button >" 

#sppb-addon-wrapper-ba6abc6f-29db-4990-878f-5198b6bcdee7 {
  text-align: center;
  margin-bottom: 15px;
}

But addon settings in most cases works just fine.

0
AG
Amar Guillen
Accepted Answer
4 months ago #194766

Hi Paul,

thanks for your prompt reply. I appreciate.

Both solutions do not work.

Here is a a screenshot of the settings. https://kdrive.infomaniak.com/app/share/118755/a1c8f603-2ee5-4cf3-b798-2e60205db18a

I should do something wrong but I do not see what.

I hope it will help.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194772

Add my code inside Page Settings > Page CSS > Custom CSS

Is correct, but maybe you used it in the wrong way.

0
AG
Amar Guillen
Accepted Answer
4 months ago #194786

Thank you very much Paul,

it works.

Do you know why I should add this css?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194788

To be honest I have no idea, becuase in 99% cases, addon settings just work fine.
It can be problem from Template as well.

Make a quick test (3min):

  1. Create a new page, add new Section.
  2. Add Button addon, set it to display on the middle (center aligment)
  3. Preview page
  4. Then change Template from current to Casiopea - make it default for 60sec
  5. Preview page again
  6. Then set your extra template as default again.

Maybe if you would share access I can check it. But first do my test with all steps.

0
AG
Amar Guillen
Accepted Answer
4 months ago #194792

Hi Paul,

I created a new page with my template: https://gpfa99.guillenphoto.com/fr/test-button.html

It works fine with the css.

Do you have any idea?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194793

You used only settings, no extra CSS, right?

I think, I may know, You enabled Production mode in SPPB settings, it keeps old settings, like cache.

Please go there and click Clear, it will reload CSS.

0
AG
Amar Guillen
Accepted Answer
4 months ago #194801

Thanks.

It is not working. The button is on the left.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194802

Hopefully with extra CSS worked on mentioned page, so keep this way.

Next time, just share access, I will check deeper.

0
AG
Amar Guillen
Accepted Answer
4 months ago #194911

Hi Paul,

I am back to you because I am trying to update my production website and it is not working with the css you gave me yesterday for my test website.

Please would you check my production website in French: https://www.guillenphoto.com/fr/ ?

Scroll down to the button labelled "Découvrir les galeries photo >". The button is located on the left. I would like it centered.

Would you give a permanent solution because I am going to create the same button on the English version of my website. It is another spbuilder page.

Thanks for your help

Sincereley, A. Guillen

0
AG
Amar Guillen
Accepted Answer
4 months ago #194912

Hi Paul,

I found the way you gave the correction. I am not a developper but sometimes, I use Chrome Console to find out.

I copied the div id of the wrapper and it works.

But it is not satisfaying. How can I avoid that trick?

Thanks

0
AG
Amar Guillen
Accepted Answer
4 months ago #194946

Hi Paul,

I found a permanent solution that works well.

I created a module and the result is what I want.

Thanks for your help

Sincerely, A. Guillen

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 4 months ago #194950

This is also good solution, also becuase that same addon (module) you can use multiple times.

0