What worked for me was to add the following code to the underlying section: Section Settings > Advanced (Custom CSS) > Main Element and then paste the following code into the code window: display: flex; justify-content: center; align-items: center; flex-direction: column; This will vertically center the row contained in a section within the browser's viewport.
It is practically useful tutorial for front end designers. I noticed all other your tutorials also saves lot of time while building sites in Divi. Very practical. Thank you very much. -Ravi
Thanks for this. Once again I am in awe that this is not a built in feature of Divi. In Elementor it is one of the very first settings one can make for a row, a section etc. But in Divi, yet again: you need to use CSS. What a bummer. I am glad that I have to use this page builder of death only for one client.
Thanks, Andrew! Found an even easier solution to this. It's in comment #6 in the post comments if you want to check it out: joshhall.co/how-to-vertically-align-content-in-divi/ Now I need to do a version 2.0 :)
Thanks Josh, just checked this now, and is an effective alternative solution for sure. That's another thing I love about the Divi community, everyone is prepared to offer advice, help, guidance, etc. which is genuinely appreciated. Thank you very much again Josh!
Hey Josh! Unfortunately, I'm trying to use this super handy tip to vertically align my columns, but seems its no longer working on divi's latest update. Notice divi's latest version is no longer showing separate classes in the Row Advanced Settings. Instead there is now an option to individually adjust entire column settings. Could you please help post an update? Thanks for this amazing tip in advance! :) Cheers
Step 1: Equalize column height of the row like in the video. Step 2: Go to the Custom CSS section of the column you want to center. Step 3: Paste this piece of CSS in the "Main element" box under Custom CSS. (So basically when you enter the settings: Advanced>Custom CSS>Main element) margin-top:auto; margin-bottom:auto; Hope this helped, Have a nice day
Hey josh Great Info thanks again works great, just one issue what do you do if you have a single column row and you want to align the vertical center to the section. Iv tried this but with no luck. I'm having this issue repeating itself a lot due to different padding heights of the section
mmm yeah it might not work with one column because there's no other columns to equalize the height. I'd just adjust the margins or padding accordingly!
Where can I make a reclaim?? I've been watching these videos and I'm afraid my forehead has grown just over an inch and unfortunately my hats don't fit me any more :-) Great Stuff... off to the website to grab that code.
Hi Josh! it worked for me in desktop but on mobile it just ignore the CSS, let me explain what I am doing, I have 3 columns and I follow your tutorial to keep those 3 on mobile use width 33%, then I add all the flex CSS to center all these 3 elements, what really confused me is that i can keep the 3 columns on mobile but they are not center and on desktop al the CSS work perfectly, thanks in advanced My code .three-columns .et_pb_column{ width: 33.33%!important; display: flex; flex-direction: column; justify-content: center; }
The main element area is a class itself so you can't add a class within that. Recommend putting all that CSS into the Custom CSS section in Divi or ideally child theme!
No sure, should work if you followed the tutorial. Please check the post and try my updated way from 11/16/17. joshhall.co/how-to-vertically-align-content-in-divi/
Just FYI for all, this technique is no longer valid. After futzing around for 30 min trying this technique, it won't work in the latest version. Its MUCH simpler now. On the Row, click the gear icon (settings) and set Sizing>Equalize Columns = Yes, THEN in the same Row Settings, click CONTENT and for each column (Column Settings) you want to be set, add margin:auto; to the custom CSS for each column. Job done...
.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}
What worked for me was to add the following code to the underlying section: Section Settings > Advanced (Custom CSS) > Main Element and then paste the following code into the code window:
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
This will vertically center the row contained in a section within the browser's viewport.
It's people like you that make my job so easy, thank you!
haha love it - thanks, Stephanie!
Thanks, just what I needed. Divi should add that feature into the builder.
It is practically useful tutorial for front end designers. I noticed all other your tutorials also saves lot of time while building sites in Divi.
Very practical. Thank you very much.
-Ravi
Awesome to hear. Thanks so much for the feedback, Ravi!
Thanks for this. Once again I am in awe that this is not a built in feature of Divi. In Elementor it is one of the very first settings one can make for a row, a section etc. But in Divi, yet again: you need to use CSS. What a bummer. I am glad that I have to use this page builder of death only for one client.
Thanks Josh! Worked a treat. Nice clear video.
your all videos and tips is really great thanks
DUDE FOR REAL I APPRECIATE YOUR SIMPLE NATURE ON EXPLAINING SPECIFIC DIRECTIONS. THANKS AGAIN. LET ME KNOW IF I CAN HELP!
Thank, Josh. Simple and very useful tutorial.
Thanks man, not only was I having a centering problem, I also wanted to know how to do image circles.
Bam, 2 birds with 1 stone :)
Love it, Jason! I know I didn't even mean to throw that in there but it worked out :) Thanks for the feedback!
Nice work Josh, you're a star!
Thanks, Andrew! Found an even easier solution to this. It's in comment #6 in the post comments if you want to check it out: joshhall.co/how-to-vertically-align-content-in-divi/
Now I need to do a version 2.0 :)
Thanks Josh, just checked this now, and is an effective alternative solution for sure. That's another thing I love about the Divi community, everyone is prepared to offer advice, help, guidance, etc. which is genuinely appreciated. Thank you very much again Josh!
just subscribed because of this tutorial!
I'm so fucking stunned. It worked! It is soooo beautiful. Thanks a lot, Josh. Thank you thousand times!
Thanks brother for giving another awesome tutorial
No problem, Jagadeesh!
Hey Josh!
Unfortunately, I'm trying to use this super handy tip to vertically align my columns, but seems its no longer working on divi's latest update.
Notice divi's latest version is no longer showing separate classes in the Row Advanced Settings. Instead there is now an option to individually adjust entire column settings.
Could you please help post an update?
Thanks for this amazing tip in advance! :)
Cheers
Step 1: Equalize column height of the row like in the video.
Step 2: Go to the Custom CSS section of the column you want to center.
Step 3: Paste this piece of CSS in the "Main element" box under Custom CSS. (So basically when you enter the settings: Advanced>Custom CSS>Main element)
margin-top:auto;
margin-bottom:auto;
Hope this helped,
Have a nice day
I dont have columb 1 CSS class?
and how can i achieve that the row is centered on the screen? my row sticks on top...
this very basic function should be part already with the builder.
thanks Josh, great tutorial!
Why on earth isn't this option implemented in the divi builder already? On switch , like "full-width row" or "equalize column height" ...
Hey josh Great Info thanks again works great, just one issue what do you do if you have a single column row and you want to align the vertical center to the section. Iv tried this but with no luck. I'm having this issue repeating itself a lot due to different padding heights of the section
mmm yeah it might not work with one column because there's no other columns to equalize the height. I'd just adjust the margins or padding accordingly!
Hey thanks Josh a bit annoying hahah, Maybe in future tutorials you can show good css rules to compensate on that cheers :)
Where can I make a reclaim?? I've been watching these videos and I'm afraid my forehead has grown just over an inch and unfortunately my hats don't fit me any more :-)
Great Stuff... off to the website to grab that code.
Thanks for your tutorial!! Please can you add the css for bottom align? Many thanks :))
Hi Josh, thanks for the great tutorial! Is this still the best way to do this in Divi in 2020? Thanks again!
Yep see the revised code in the post as it's a little shorter solution. It's still what I use today :)
@@JoshHallco AH-Mazin.' Thank you! 🙏🙏🙏
Super helpful! Thanks so much for posting this :)
Hi Josh! How can I align a image to the bottom? Thanks, Bertus
Awesome! Thanks for the help!! This works like a charm :)
Hi Josh! it worked for me in desktop but on mobile it just ignore the CSS, let me explain what I am doing, I have 3 columns and I follow your tutorial to keep those 3 on mobile use width 33%, then I add all the flex CSS to center all these 3 elements, what really confused me is that i can keep the 3 columns on mobile but they are not center and on desktop al the CSS work perfectly, thanks in advanced
My code
.three-columns .et_pb_column{
width: 33.33%!important;
display: flex;
flex-direction: column;
justify-content: center;
}
thanks, real usefull
How do i access to the divi styl sheet?
joshhall.co/where-to-put-your-custom-css-in-divi/
Just started using DIVI. tried your tutorial and I am getting a weird error in my simple css. here is a screen shot. prnt.sc/jxje61 any ideas?
The main element area is a class itself so you can't add a class within that. Recommend putting all that CSS into the Custom CSS section in Divi or ideally child theme!
What?!? All of this to have a vertical align?!?!? Really?!?!?!?
Hey, man. Did not work for me. Any tip?
No sure, should work if you followed the tutorial. Please check the post and try my updated way from 11/16/17. joshhall.co/how-to-vertically-align-content-in-divi/
use margin:auto; instead of above code
Just FYI for all, this technique is no longer valid. After futzing around for 30 min trying this technique, it won't work in the latest version. Its MUCH simpler now. On the Row, click the gear icon (settings) and set Sizing>Equalize Columns = Yes, THEN in the same Row Settings, click CONTENT and for each column (Column Settings) you want to be set, add margin:auto; to the custom CSS for each column. Job done...
yup , its easy pesy