How To Vertically Align Elements in Visual Composer (Default Rows)

How To Vertically Align Elements In Visual Composer (default Rows)

The Problem:

Visual Composer Site Builder by default only provides the option to vertically align elements when the row is set to full height mode unless your theme has included code that enables it.

In this case I’m using one of Theme Forests most popular themes: Total, which I highly recommend.

The solution to this problem alluded me for longer than I would like to admit, especially considering how simple the solution turned out to be when I discovered it. After dozens of hours searching Google for a fix I turned up nothing that worked, let alone was practical for widespread application. The people over at StackOverflow were completely unhelpful as usual. Even the plugin Author’s (WPBakery) support team told me “I am afraid, we do not have an easy way to vertically center the content for default rows. We might add such an option in future.” and it would require completely rewriting” the code of row element[s] from scratch”. Which I’m now fairly confident in saying is demonstrably false. I’m not sure whether this support guy was being intentionally deceptive as they tried to upsell me third party apps, or if he was just completely clueless, I’m leaning towards the latter.

The solution:

I found the solution by enabling the full height row and vertical alignment center options. Then opening the page in my browser and inspecting the element with my browsers developer tools. Most modern browsers should have this stuff built in. All you need to do is add the following classes to the target element row.

Vertical Align Top
Vertical Align Middle
Vertical Align Bottom

As pictured below

 

Visual Composer Row Options

Alternative Solution:

If for some reason these classes have no effect and are not included in your version of visual composer then you can try integrating the following css manually.

Conclusion

Hopefully this should help solve any issues with trying to vertical align any elements within a row. If you found this quick tutorial helpful, don’t forget to like this page and share it. If you have any suggestions on how this article may be improved leave a comment below and I can use any helpful suggestions to update the information accordingly.

*I’m british and we spell it “centre”, but as “center” is the required spelling when coding, that’s the way I’ll spell it to avoid confusion.