It’s really simple to centre text horizontally in Divi just using the builder settings. However there’s no setting to vertically align the text within the column.
This can cause layouts to look messy, especially if you try to centre things using padding or margin.
This tutorial will walk you through how to do it with just a little bit of CSS.
There’s lots of different use-cases for this, but for this tutorial I’m going to create a 50-50 column with text on one side and an image on the other.
Step 1:
Add a section with 2 columns. In the design tab of the row setting, turn on “Equalise column heights”.
Step 2:
Add a text-box to the left-hand column, and add the text you’d like to use. For this example I’ve used a h2 and some body text.
Then in the advanced tab give it a custom CSS class of “centred-text”.
Step 3:
Add in image to the right-hand column.
Then save the layout!
Step 4:
Add the follow CSS to your custom CSS in your theme options.
.centred-text {
display: table;
height: 100%;
}
.centred-text .et_pb_text_inner {
display: table-cell;
vertical-align: middle;
}
Step 5:
Save and you’re done!
Let me know if you have any questions in the comment section below! Or feel free to drop me an email at: [email protected]
You can also checkout more Divi tutorials below.
Get FREE Divi tutorials and layouts each month!
Join 400+ Divi enthusiasts and level up your web design game!
More articles
Why it’s important to keep your WordPress website up-to-date
Updating a WordPress website is often overlooked. Many businesses think they just need to set up the website once and forget about it. But this is not correct. Let’s look at why it’s important to keep your WordPress installation up to date. Exposure to Security Risk...
30 Lawyer websites for Web Design inspiration 2020
If you’re looking for inspiration for a law firms website, you’ve come to the right place! I’ve done the hard work for you and collected what I think are some of the best lawyer websites out there. If you think I’ve missed any, leave a comment below and I’ll add it to...
Web Design Inspiration Websites – The Ultimate List (35+)
As a web designer I spend a lot of my time scouring the web for inspiration. When working on client projects I used to just search "industry" + "location" into google (e.g. "architects london"), and go through all the websites on the first few pages. But this wasn't...
Thank you so much! You’ve saved me tons of time!
Thank you for your generousity. Have learned so much. Having a wee problem implementing the tutorial. Think my issue is “Then in the advanced tab give it a custom CSS class of “centred-text”. Should that be placed in, Column Settings>Advanced>CSS ID & Classes>CSS Class>?
Using Divi 4.02
Can’t understand what I am doing wrong?
Glad you found it useful! That class should go in the text module settings.
How do you put it in theme options
Hey John – to find the theme options:
1. log in to your dashboard then navigate to “Divi” in the left-hand menu
2. Scroll to the bottom and you’ll see a box called “Custom CSS”. Add the code into that box
Hope that helps!
Thanks for the info, Andy. Is there a way to make this work when you have a row/section that needs to be a set height?
Hey Dirk – this should still work with a set height row / section. If the section is fixed height the row will need to be set to 100% height for it to work.
Nice work, in your demo the text looks flush left. In my situation the image is on the left and text on the right and when I use your code the text remains center but pushes the text box to the left of the column. Am I missing something?
Thanks for the share.
It’s the first module after the head on the volleyball page (currently without the css ID)