How to Vertically Align Content in Divi
In this tutorial, I show you “How To Vertically Center Content in Divi.” Divi has an option to “Equalize Column Heights,” but it doesn’t center the content in the modules which can be very frustrating. You can certainly do that by adding padding and margins to the Divi module your content is in BUT, if content gets rearranged, you’ll have to rework everything you did to make it look right again. Luckily, this tutorial shows you the quick and easy solution!
This tutorial is based off of this post by Michelle Nunan of Divi Soup which has helped me out tremendously. We’re going to take what she created but dive into it a little further and explain WHY and HOW it works.
Have fun! – Josh
.vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}
Similar Tutorials:
A fellow Divi designer made me aware that if you put this CSS in your stylesheet and click Equalize Column Heights, it’ll work without having to do the extra steps. But the old way in the tutorial will work as well 🙂
Step 1 – Add this to your stylesheet or custom CSS section:
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Step 2 – Add this to your stylesheet or custom CSS section:
Equalize column heights in your row.
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Josh, I can’t tell you how many times I have tried to position images so they are aligned in the center of a column and match the text in an adjacent column. I have never used the following expression before (probably because I am a baby-boomer) but your tutorials “rock”!
Haha thanks, Eddie! I’m right there with ya man. This method has been a HUGE time saver for me. Thanks for your continued support and feedback!
Thanks, Josh! This is great. Not just the vertical centering, but also on how to make & resize the round image.
Thanks, Sharon! Yeah I didn’t even intentionally throw that in there but I’m glad it helped you out! I might do a whole other tutorial on adding shapes like that to Divi images in more detail…
This worked perfectly. Great, simply (elegant, eh?) solution.
haha awesome, Sal. Someone in our Divi group pointed out an even easier solution. Drop this CSS in your stylesheet, then all you have to do is select Equalize Column Height then it works automatically.
Now I need to make a version 2.0 of this tutorial…
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Hi Joshn, this is not working for me. Is the above code correct?
Hey Lucas, yeah it’s correct and is what I use now!
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Just be sure to have equalize columns selected on the row then it should work.
Worked perfectly! Cheers
Awesome to hear, Jonathan!
Flex is great !!!
I cant get the updated method to work. Any tips to make that work?
Also I cant get the old method to work either. Its weird the two colum method you did works just fine IN THE VISUAL BUILDER. But when I save it and go to the page, it doesnt work.
Plus if I have a 3 column with text in each colum and that text is uneven in each, I cant get the buttons to align under the text.
https://alcreadev.com/test/
mmm not sure. Maybe a recent Divi update changed some things. I’ll have to look into it…
Hey Alex, try that updated method out now! For some reason, when I put the CSS in it replaced the > symbol. Should be good to go now!
Your
it outputting > vs ">" ... I already see someone complaining it's not working because you "provided bad code" ;)Hey Sal, thanks for the heads up. Yeah for some reason when I pasted the CSS in it messed that symbol up. Good to go now.
Hi there,
is it possible to do a vertical-align:bottom as well?
mmm I’m sure it’s possible Ralf but I haven’t done something like that. I imagine you’d just find some css to make it stick to the bottom. Could try W3 Schools for some CSS for that.
Can you put square image code too 🙂
i did from video thanks 🙂
border-radius: 100%;
overflow: hidden;
max-width: 350px;
Great!
Hi Josh.
I don’t understand why the reference to the source of this tip doesn’t appear anymore :(…
Hey Pierre, I mention you, well nameless currently 🙂 from the update on 11/16/17. I don’t like to link back to FB threads so let me know if the tip is ever on your site then I’ll be sure to link to that!
Hi Josh.
Frankly, I prefer to be named by my true name than by an anonym “fellow Divi designer” Josh ;)…
And even if I haven’t create a tutorial for that tip as you do, a link to my website will be appreciate ;).
All the best.
Pierre
Pierre what’s your website?
Hi Josh :).
It’s in my “signature” 😉
I don’t understand. Put that initial code where? Perhaps newcomers like me just don’t get it. There should be a petition to make this a Divi feature. I can’t fathom how this isn’t a built-in option! Thanks in advance for your reply 🙂
Hey Theo, there are approximately 712 places to but your CSS in Divi. Just kind of kidding. Here’s where I recommend: https://joshhall.co/where-to-put-your-custom-css-in-divi/
Haha nice. I stumbled across the answer. Also I got the stuff aligned, great work. I added the code in general settings, worked instantly, was confused about page specific CSS fields. Thank you 🙂
Great to hear it’s resolved. Cheers!
Hey there. This worked great for me, except the alignment for some reason isn’t applied to the tablet or mobile version. Any ideas?
mmmm not sure, Lauren – works for me across all devices so I’d just be sure to clear cache and make sure nothing is overriding that code.
How can I make this work for a single text module inside a column with other modules that are not to be centered? I tried adding it to the text module but that doesn’t seem to work.
mmm not sure on that, Lizzy. I would think it’d work but you could try some different centering CSS methods or just manually adjusting the padding.
Ha, here from yahoo, this is what i was looking for.
Hi Josh,
Thanks for the tutorial and a code but I have one question.
Position:
Fullwidth 1920 x1080
TXT (left side) vs IMG (right side). 50% / 50%
if I set padding 150px (for example) for the Text in the Column1 Main Element – all looks well in big screens.
150 px are around the text.
But if to start to resize the screen you will see that on the left side of the text – there is 150 px do not change.
And on mobile, it looks ugly.
I have to change the margin in minus values to move it left to the center of the screen.
Maybe 50 px of padding will be OKay but 150 px is not!
What to do?
Thanks in advance
May require some CSS/media queries on this one if you want thing to align different on mobile. Hope that helps for now!
I want to put the image in the bottom.
How should I do Josh?
There is a setting in the image module to keep image at the bottom!
This is great!
Been looking for solution for this for a long time!
Awesome to hear, Ole!
The second method is a much better option. The first option just caused my images to disappear. Thanks for this 🙂
Yep I’m planning on revamping this with the new method. Definitely better than the original 🙂
Hey Josh,
Thanks for all the awesome content!
I’m trying to get a single column layout (with just a short line of text) to vertically align on top of a full width background. The page that I’m working on is here: https://www.chadmbrown.com/about-me/ (I’ve currently got some padding at the top and bottom of the row to try to ‘hack’ the vertical align as the CSS didn’t seem to be doing the trick and it’s a live page that I didn’t want it looking messed up to visitors). I’ve added the CSS to the stylesheet and I’ve turned on the ‘Equalise Column Heights’ in the row settings but the text still sits at the top of the section. Anything that I’m missing or any other tips?
Cheers!
Also, just wanted to confirm that I’m using the updated method, not the original one 😉
Have you made sure cache is cleared and page is refreshed? Should work as long as code is in correctly.
Hey Josh, thanks for the tutorial. Works like a charm (I used the second method). For reference, this is on WordPress 5.2 and Divi 3.22.7.
This works but only if there’s no background. If there’s a background on the module, the background doesn’t stretch to take up the full column space. If I stretch the background, the text no longer vertically aligns 🙁
mmm I’d try messing with the background design options in either the section, row or module. I have this affect on many sites with backgrounds..
Is there any reason this wouldn’t work for the text content (main OR title) inside a blurb module..? I can’t find a simple solution to have a blurb with some centered text to the right of it… Stumped!
mmm not sure Tina. I generally don’t use this on blurbs or for the text inside a blurb. That may have some additional code that needs to be customized with css…
Pierre didn’t think through his updated CSS as it doesn’t take in account the loss of margin on tablet and mobile.
ex: 2 columns w/ img left & text right – image sits directly on top of text @980px and smaller
The original works best.
thx josh, this saved me a lot of time