How to Vertically Center Text in Divi

In this quick Divi tutorial, I'll show you How to Vertically Center Text in Divi.
View the full post with links and resources:
joshhall.co/ho...
Watch Part 1 "How to Make a Fullwidth Section in Divi" here:
• How to Make a Fullwidt...
Other important links:
Get 10% OFF Divi Theme with my affiliate link:
bit.ly/2RoJXxF
The design shown in the tutorial is also available for you as a free Divi layout! Download here:
joshhall.co/pr...
Want to learn Divi quick? Join my Divi/WordPress Beginners Course:
joshhall.co/pr...
Want to learn Divi and CSS? Join my Divi/CSS Course:
joshhall.co/pr...

[@ultimatekv]

Very helpful trick. Just saved me from a headache :D Just a bit disappointed that ET has not fixed that issue yet

[@tzatzum]

I like it! Keep safe and stay in home!

[@MelanieDurette]

Thanks so much for this. It's something I've wanted to do for years and finally just downloaded your template. It works so well! Yay!

[@mariannereuter]

Thank you so much! Being a newbie with Divi and having worked with Adobe Muse before this was just the advice I needed.

[@EdKenUK]

This is great, love these kind of videos from you Josh

[@JoshHallco]

A lot more coming your way, Ed!

[@CharlyDS]

Awesome! One goes from total HTML/CSS to try to "draw" everything in the builder :D But definitely CSS to the rescue. You inspired me with the margin: auto settings (and the equal columns height setting), but I did not use the site CSS, this was for a header with menu etc, and what I did was setting the row CSS to display: flex (and the margin: auto in each column) and it worked perfect too! Thanks!

[@williamgorelander8290]

Thanks for the tutorial. I can't believe you have to go through all that just to align vertically. Other page builders there is a button for it (ex. Nicepage). Also it's really easy to do it using css flex (align-items: center). I like page builders because they're quick but often to do something that would be simple via manual coding is a real chore. I'm trying DIVI as a page builder and appreciate some of the professional features, but I find the UI relatively messy and unintuitive.

[@JoshHallco]

Let's see what they add in Divi5 which is around the corner....

[@ewadembinska1128]

Its work! THX!!!

[@Moon.Almoonthe]

Thanks man this code is a life saver :(

[@ilyas9303]

I was looking for this. Thanks so much!!

[@Moon.Almoonthe]

It crush my gears why would Divi not set these options available out of the box :)

[@ricardovilardelgado]

Thanks Josh!!!!

[@HarpreetKaur-mv8ko]

TYSM it worked for me :)

[@programmingchicago]

Thank you.

[@sarmadali77771]

How two rows vertically align on a single section? Is it possible using CSS technique

[@jakebolling7550]

Divi: the only website builder that makes you use custom CSS and a child theme to align basic elements Seriously, what's the benefit of Divi versus Elementor?

[@Moon.Almoonthe]

But isn't using the theme customize css panel just as you have shown in this video cuts the needs for a child theme?

[@elisateruzzi4360]

hi! I have a button on a cover images. i want to put this button on the center bottom of the image. how may I do that?

[@jonasaeschlimann3742]

Hello do you know how this can be done? i work a lot with divi but for this case i have no solution: I have two columns, in the left column I have an image that fills the whole screen height. In the right column I have three text modules, the first text module I want align to top vertically the second align in the middle and the last on align to the bottom. Is that possible somehow? Do you have a workaround for this? if I work with padding then it is definitely not right on some screen 8:17 am

[@lorenzlucin9938]

This is really awesome. I would like to know josh if you have a tutorial that those text has a 2 button on both side like left and right corner of the text. Is it also automatically center ? can you make also a tutorial how to make a two button left and right in one column

[@JoshHallco]

I'll actually do ya one better, I created the "Divi Double Button" as a layout that you can apply to any section on your site! joshhall.co/product/divi-double-button To add buttons around that text, you'd have to use a specialty section with 3 columns on the right but this code should still work.

[@paulo-ingrevallo]

Many THX!

[@mudassirmirza783]

Hello josh sir, Many people are giving their course for free like Craig Campbell and Moz Academy to help people while Novel Corona Virus is spreading. I just want to ask you one question that are you also giving your courses free for sometime to help the community.

[@mudassirmirza783]

I know that you're giving 25% discount on all of your courses but in this situation I can't afford to buy your courses. If possible give your courses for free it's my request to you josh sir please

[@honey87west]

What about aligning it to the centre within a module? I have a text module with two fonts inside. I'm using the divi icons font to have an icon before my heading, and then a heading in a separate font. The divi icon font seems to be aligned to the top, whereas the text is either aligned at the bottom or in the center. It looks disjointed :( How do I get them both to look like they are vertically aligned in the centre?

[@dorthedee7245]

Hi Josh Thank you so much for your tutorials. Hope you keep up the nice work and are safe. I hope I can give some back some time. I've used this code and it works fine in the page css but not in the child theme. Any idea why? All the best /D

[@JoshHallco]

As long as everything is correct in the stylesheet, usually you just have to clear your cache and refresh browser. That should do it!

[@dorthedee7245]

Thank you!

[@kironet]

3 years later, and still no update on this from Divi lol

[@JoshHallco]

Let's see what Divi 5 has in store...

[@deborahbell6031]

Love It!

[@alainpatry]

Do we still need to use child themes with Divi 4? I'm not sure but I thought I'd heard it was no longer necessary when they released version 4.

[@JoshHallco]

Any time you do a lot of custom code I recommend using a child theme. Explained more here! joshhall.co/divi-child-theme-explained-free-child-theme/

[@LumpiDeluxe]

But can the CSS code also placed into module-css-custom-code? How?

[@JoshHallco]

Needs to be in the theme custom CSS area. See here: joshhall.co/where-to-put-your-custom-css-in-divi

[@jasonbonner8009]

I've tried pasting this in Additional CSS, my child theme CSS and my child theme style sheet with no results.

[@JoshHallco]

Just be sure to clear cache and do a hard browser refresh!

[@paulcoles6152]

You could try going into row settings->design set Equalize column heights on. Then row settings content column structure choose the column you want to centralize advanced custom css main element and add margin-top:auto; margin-bottom:auto;

[@nssdesigns]

Wouldn't know how to scale and position photos in a div in DIVI like Brizy and Oxygen let you. For me it's always a shit trying to crop a picture in DIVI

[@JoshHallco]

mmm yeah I understand that. You could go about making the background of a column the image and set it to cover that way it won't stretch but will keep within the column depending on the amount of content next to it. I added this to my potential tutorial list though ;)

[@nssdesigns]

@@JoshHallco I'm sure you've seen Brizy how I handles photos is brilliant. In Oxygen it's possible too although not as dynamic. It's a shame DIVI just doesn't offer anything close.

[@sawancenarock]

Great

[@chrysalisdavid]

🔥🔥🔥

[@jamesdavis8731]

Although there are a lot of good things about DIVI, the fact you have to add custom CSS to align text or images vertically is absurd. I really need to talk to DIVI developers and ask them why they can't make this EASY to do. Just blows my mind. There is no question that knowing CSS is a good thing and can help with any page builder or theme, but with DIVI it is absurd at times. To have to use CSS to align text or images and to have to use CSS to have buttons side by side is just....just....incredibly ridiculous.

[@heypbolon1941]

I hate this

[@MasterT2]

DIVI is just a pain to work with.