We sometimes found a simple case, but it’s tricky when designing a website page with Divi Builder. For example, we must set the module to display inline when creating a static star rating. Still, the problem is when we set the module inline by adding custom CSS; the module can’t be horizontally centered (see the GIF below).
This article will show you how to make modules horizontally centered in Divi Column.
How to Make Modules Horizontally Cantered in Divi Column
Go to the Divi Builder editor and prepare a module you want to center horizontally in the Divi column. In this example, we will use the Icon module to create a static star rating.
Next, we would like to do the module displayed inline by adding the custom CSS, so please add
display: inline; to the Main Element field on your module.
As you can see from the image above, the module’s alignment is automatically forced to the left, and you can’t change it even if you edit it on the Icon Alignment settings.
Alright, now we are going to fix it. It’s effortless; the only thing that we need to do is add the custom CSS on the Divi Column. Click the Layers button, then go to the Column settings -> Advanced tab -> Custom CSS. Copy the CSS snippet below and paste it into the Main Element field.
display: flex; flex-direction:row; justify-content: center;
That’s it. You can duplicate the module, and it will be displayed inline and horizontally centered. Don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can make modules horizontally centered in the Divi column. It might be a simple topic, but sometimes happiness comes when you find simple things, right?
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.