How to Center Buttons and other elements using external #CSS

Published in IT Solutions

How to Center Buttons and other elements using external CSS

How to center something width-wise using CSS. In particular this is useful for buttons. Even more particularly I made this to help people to center buttons if the are using Joomshaper SP Pagebuilder. I used this to center the buttons for SP Pagebuilder, but this could also be used for anyone who want to center something horizontally with CSS.



First you need to understand something about CSS. There are a number of ways of implementing it. Like, Inline CSS, Internal CSS and External CSS.

"Inline" is basically adding CSS in the HTML code right at the point you need it. The problem with this is that you need to put the code in again and again if you need to re-use it.
"Internal" is when you add the CSS into the start of the HTML page. Then you only need put the class (the name that refers to the CSS) in for each piece of HTML that needs to be styled.
"External" uses a style sheet that is not stored within the HTML page. The beauty of this is that you can create a “class” that can be used for every page on the entire site.

I will be using external CSS in order to center my buttons.

Find your main CSS file or custome CSS file:

Regardless of what system you are using (Wordpress, Joomla, Drupal or a simple HTML template or flat file CMS) you will no doubt have a main CSS file.The main CSS (which will probable be called something like template.CSS) is one place you can put the code. In my case, the template also allowed for custom CSS by including a custom.CSS file. This means the template could be updated without breaking any additional CSS you have added. This is where I put the CSS to center the buttons. NOTE. Sometimes the templates themselves will have a section in the backend called “CSS overrides), you can paste the code there if your template has one.

 

Place this CSS code in it:

I pasted the following code into custom.CSS

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

Once you have saved the CSS to center the buttons all you need to do is add the following HTML in front of the things you want to center:

class="mycenter"

In my case (as I said), I wanted to center buttons on the Joomshaper SP Pagebuilder, so I simply went to the page in the Joomla backend in SP Pagebuilder and edited the button addon and typed “my center” (without the quotes) in the area called “CSS Class”. As long as your custom.css or template.css contain the external CSS code above, your SP Pagebuilder buttons (or other elements) will now appear centered.

Changing CSS class on JoomlaShaper buttons SP Pagebuilder screenshot