How to align a widget center in a wpbakery row?

Question

This has got me. I am actually wondering if this is a bug or my theme hindering the visual composer styles. I got a row which has row settings - stretch row. Till here everything's fine. What is I cannot accomplish is to center align a widget (say text block) in it. The widget tends to align left. Changing row settings doesn't do anything. It has an option to vertically align a text but not horizontal align? Basically I want my content of rows exhibit text-align:center.

Flavia

WPbakery is a paid plugin so for sure you have a licence and you can contact the support, I think it's the best to do. – Armandoarmature

I got this plugin bundled in a theme which client purchased. I have not much experience in designing. Isn't this a very basic thing? for a content builder to give option for aligning content left/right/center? It's even more interesting that I couldn't find anything on web similar to this issue means I'm the only doing it wrong. – Flavia

well, if you use a row with one column, then a simple text-align:center applied to your text will work – Armandoarmature

Yeah, I delivered project doing that only..It's working as I would want but I wanted to know why wpbakery can't do this for me.. – Flavia

Because text is easy to align using the text editor option, probably we don't need an extra option – Armandoarmature

Ain't content builders are for non-programmer people? And btw if text-align is easy then changing bgcolor is as easy. Why they didn't remove both? – Flavia

you cannot set background within the text editor and yes the builder is for non-programmer and aligning the text is easy within the editor. You won't need code, you simply need to click on icons – Armandoarmature

Answer 1

I also use WPBakery from time to time for designing Wordpress websites and you do not have a setting for horizontal alignment directly. You must use custom CSS code to do that. You have a few options but if you ask me the best option is to use Flexbox which is a relatively new CSS aspect. So here are the thing that you should do.

1. In Responsive options of the column that you want to center select something like this: 10 columns - 5/6
2. Select the row settings and in additional class name write something like this center-content
3. Lastly, on the page you design there is a section that you can write page-only CSS find it and write this code:

.center-content {
    display: flex;
    justify-content: center;
}

I hope this will help someone out there in the same situation.

Fulminate

Answer 2

Try margin: auto. Can you share a link?

You can either do this CSS or the wpbakers has a place where you can adjust padding and margins inside the tool.

https://wpexplorer-themes.com/total/docs/visual-composer-spacing/

Malleolus

Yeah..I improvised using a similar technique for now. Added a custom class to row and added text align center. It's working as I would want but I wanted to know why wpbakery can't do this for me..Thanks for your answer though – Flavia

Answer 3

Setting the left and the right margin to auto of the inner row, worked for me.

Wondrous

Answer 4

I've found this, on the demo of my them (revolution theme) they put on the "addtitional class name" this text: text-center align-center

Apparently there are no basic button that permit to do that. You have to enter your css class manualy. This is strange for a builder like this ...

Selda

I guess in english this is "extra class name" more than "additional class name" , I have my wordpress in french so I am not sure about the exact terminology. – Selda