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.
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.
margin: 0 auto;
#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.
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!
margin: 0 auto;
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.
margin: 0 auto;
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.
Once this is open, scroll down to ‘extra class name’ now you paste center-btn in the field, click save, you’re done!
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!