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.

Solution

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.

Comments

[Temani Afif]

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.

[Arshiva]

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.

[Temani Afif]

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

[Arshiva]

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..

[Temani Afif]

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

[Arshiva]

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?

[Temani Afif]

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

[Arshiva]

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

[chab]

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.