I know that Beaver Builder doesn’t natively support vertical centering yet but was wondering if someone could help me.
I have a text & video module inside of a column that I need to vertically center. I’ve been trying various CSS solutions online but can’t seem to nail it.
Is anyone able to give me a hand?
The site I’m working on is http://ventureup.co.nz and you can see the video part way down the page. As the site goes responsive we need that video to be centered vertically.
Note: the site is still pretty rough - lots of css tidy up to do yet.
Thanks for posting! The video is already vertically centered from its container. It’s just that you’ve a lot of margin on the next Text Editor module pushing it way down. I’d suggest removing the 20px top margin you have on that Text Editor module as well as the 20px top margin applied to your h3 on mobile.
My apologies - I wasn’t clear enough. It looks fine at full Desktop resolution. I’m referring to smaller desktop screens and tablets where the video gets smaller and ends up floating at the top of the column.
I’ve been trying different css vertical centering methods without success so far to get the video to center vertically in the column until the site flips to single column mode.
I see what you mean now. I tried playing around with the site but I can’t get it either. I mean we could assign margins per device width but that would be a lot of work. I’ll just leave this out for the people in the community. Someone might jump in here.
You should be able to achieve this with FlexBox. On the latest version of our plugin, we offer a new functionality, equalized column heights. You can enable this on your columns, place a classname to the column where you want the contents to be centered vertically, then add custom CSS. Say for example, the classname you’ve added is center-vertical, the custom CSS should look this…
