Center Align the Image in the Divi Person Module

Written by Dan Mossop

When the Divi Person module is displayed in a narrow width (e.g. in a two-column row), the person image will appear above the title and description and is left-aligned by default. Unfortunately, there isn't an option to center align this image directly within the module settings. However, you can achieve the desired alignment by adding a bit of custom CSS.

Below are examples of how the Person module looks before and after center aligning the image:

Before

After

Center align the Divi person module image using CSS

Here are the steps to center align the image in the Divi Person module using custom CSS:

1) Navigate to the page where you have the Person module.

2) Enable the Divi Builder and open the settings for the Person module you want to edit.

3) Within the Person module settings, click on the "Advanced" tab.

4) Scroll down to the "Custom CSS" section.

5) Click on the "Module Elements" button:

6) In the "Member Image" field, paste the following CSS:

margin-left: auto;
margin-right: auto;

This will center the image within the Person module.

Here is an example screenshot of where to add the CSS in the Person module's settings:

7) Save your changes and exit the settings.

By following these steps, you can easily center align the image in the Divi Person module, helping to make your images look more balanced and professional.

We may earn a commission when you visit links on our website.

Streamline Your Divi Workflow!

Copying images and content directly from your clipboard into Divi has never been easier. Say goodbye to the cumbersome save-and-upload routine and hello to streamlined efficiency. Perfect for developers who frequently customize Divi modules with additional CSS.

Get Divi Copy and Paste Now!

| person module

Latest Posts

Hide Navigation Arrows in the Divi Gallery Slider Layout

Create a cleaner, distraction-free gallery by hiding the navigation arrows in Divi’s Gallery module when using the Slider layout. This is ideal when you want images to take center stage, reduce visual clutter, or rely on gesture or keyboard navigation instead of...

Customize Dot Navigation Colors, Size, and Border in the Divi Gallery Slider

Tailor the appearance of the dot navigation in the Divi Gallery module’s Slider layout by defining active and inactive colors, adjusting dot size, and applying a border to match your brand. Fine-tuning these details improves visibility, accessibility, and overall...

Customize Lightbox Title Styling in the Divi Gallery Module

Adjust the appearance of the lightbox title that appears when visitors open images from a Divi Gallery to align with your brand and improve readability. Refining the title’s color, size, and weight enhances visual hierarchy, accessibility, and overall polish. In this...

Center the Lightbox Image Count in the Divi Gallery Module

Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...

Style the Divi Gallery Module Lightbox Image Count

Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...

2 Comments

Teresa on November 14, 2024 at 10:02 am

This does not work on my module… It gives an error?
Says "Expected a 'FUNCTION' or 'INDENT' after colon"
Reply
- dan on November 19, 2024 at 8:12 pm
  
  Hi Teresa, this error suggests that the code is being entered in the wrong box. Divi has added a "Free-Form CSS" box in the "Custom CSS" section, which now shows as the default instead of the existing CSS boxes such as "Member Image". To get to the "Member Image" box, you now need to click the "Module Elements" button in the "Custom CSS" section. I've amended the instructions in the post above to include this. I think if you follow the revised instructions you should be able to locate the correct box and no longer receive the error. I hope that helps!
  Reply

Divi Booster