Seeking to center your buttons in wordpress visual composer? We eventually stopped using visual composer & enjoy using Divi, the button centering is a lot less painful.

Have you had any difficulty centering buttons in WordPress visual composer?

Centering your Button with Visual Composer in WordPress is not Native!

Natively your WordPress Theme doesn’t come with a center for buttons because that is done in CSS. If you’re like me, you’re going to use this blog a lot and will probably end up favoriting it.

Center buttons in WordPress Visual Composer Move Button To center buttons

Center buttons in WordPress Visual Composer Move Button To center buttons. A screenshot from Musicblip – analog loops you hear in our videos come from here. A great demonstration where the WordPress Theme doesn’t have a means of centering buttons.

Question from end user: Tyler I noticed my Theme doesn’t seem to have a centering drop down for the button!

Centering Buttons in WordPress is easy in Visual Composer when you know these two easy steps we fly through for the advanced users.

We tend to use this at least two or three times a week as a source for pasting code quickly!

Centering Buttons in WordPress using Visual Composer in Two Steps.

#1 Paste this in your CSS.

Center buttons in WordPress Visual Composer Page Settings Custom CSS Settings

.center-btn {
margin: 0 auto;
display: table;
}

#2 Paste “center-btn” in your Extra Class Name. No programming required.

That’s all you need to move content and buttons to the center of your web page or row.

Then you’re going to open your inner row Extra class name.

Beginner Tech Break Down – Centering a Button on WordPress Easily

This is a beginner tutorial because if you’re Googling to figure out how to center buttons – we can help increase your rank – 100% guaranteed.

You can scroll past this, and get the rest of the tutorial and explanation, or we can explain to you that we understand your skill level because you’re on this Google Search Phrase!

Center a Button in WordPress using CSS

The top right of every page in WordPress has a small ‘settings button’ – resembling a bolt or a common settings edit button.

Center a button in WordPress Visual Composer CSS on page wordpress on page css icon

Center button in WordPress more so looks like something I would break if I click it.

On further inspection, this is actually your on page CSS. When you drop CSS in it, it generates the CSS you see above.

Open this button, and simply paste the CSS to center a button in WordPress!

.center-btn {
margin: 0 auto;
display: table;
}

Center buttons in WordPress Visual Composer Page Settings Custom CSS Settings

Just paste the code, and that’s it! No programming required today. This is all you need to do to use CSS to Center buttons in WordPress Visual Composer in Page Settings.

CSS to Quickly Center all your WordPress Content!

Do not run away just yet. The code is very manageable and you will learn a lot about WordPress fields that are not explained, rather it’s more of an advanced product feature, with little explanation.

Similar to the bolt, that turns into being CSS, you will start to notice WordPress has been evolving for a long time and there’s a lot of under the hood features, and we just need to explore them.

Center buttons in WordPress Visual Composer Step 1 of 2.

If you’ve not plugged this code in, copy this code and paste it into the CSS.

.center-btn {
margin: 0 auto;
display: table;
}

Margin: The CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border.

Display: The display property specifies the type of box used for an HTML element.

For the sake of being a beginner – let’s leave this code as is, and leave to your team that you’re adding this code here.

Centering Buttons in WordPress means Opening your Inner Row Settings Step 2 of 2.

Not sure where the inner row setting button is? Use the screenshot and follow along.

Start by clicking on the button to open your inner row setting.

Center buttons in WordPress Visual Composer open inner row setting

Open inner row setting to paste your CSS call out! So that you can center buttons in WordPress Visual Composer.

Once this is open, scroll down to ‘extra class name’ now you paste center-btn in the field, click save, you’re done!

screen shot of Center buttons in WordPress Visual Composer-inner row settings extra class name

Center buttons in WordPress Visual Composer-inner row settings extra class name

Did you need any extra help centering your button in wordpress?

Still not able to center the button in your visual composer? No problem, leave us a comment and we will work together to figure it out!