UPDATE (5 March 2022) : This tutorial was written a while back when DIVI did not have a built in Option to center aligning text differently on desktop, tablet and mobile.
With the new version, if your text is left aligned and you want to align it center on mobile, all you have to do is to go to the Text Module Settings –> Design Tab and under Text Alignment – Choose Mobile and click on the Center align as shown in the image below. You could choose any combination for eg. Center on Desktop and left aligned on tablet and mobile if you want. 

The following tutorial applies to only very old versions of DIVI.

Sometimes we want to align text to the center only on mobile. DIVI gives you options for aligning your text in the settings. The alignment that you choose will be same for desktop and mobile. But if you wanted your text alignment to be centered only on tablet and mobile, you can add a class to your text module and we will write some CSS to target the text module to change alignment on mobile.

Left Aligned Header and Text on Desktop in DIVI

Lets assign a class to the text module in DIVI. To do so, we will open the text module settings in the DIVI Visual Builder as shown below.

Open Module Settings in DIVI Visual Builder

Next we will head over the Advanced Tab -> CSS Class and assign a class called center-text-on-mobile as shown below.

Save  changes to your text module and lets add our CSS to center the text on tablets and mobile.

CSS to Center align the text on DIVI Contact Form

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Center align text only on tablet and mobile */
@media (max-width:980px) {
.center-text-on-mobile .et_pb_text_inner,
.center-text-on-mobile .heading
{
text-align: center!important;
}
}

We are writing a media query here, to target only devices that are less than 980px. You can reduce the max-width:980px in the CSS above to 767px, if you want the text centered only on mobile (and not on tablet).

Now when you view your page on mobile the text should be centered as shown below.

Center Aligned Text on Mobile

I hope you enjoyed this quick tip. For more DIVI TIPS and TRICKS do visit my DIVI BLOG.
If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts –

• Center the DIVI Footer Menu and Bottom Bar Contents

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

In this tip we will center the submit button on the DIVI contact form. By default the submit button is right aligned on the contact form in DIVI. We will use the CSS Flexible Box Layout for making it center aligned.

When you add a Contact Form using DIVI, the submit button is aligned to the right as shown below.

Right Aligned Submit Button – DIVI

CSS to Center align the Submit Button on DIVI Contact Form

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Align the submit button on contact form – center */
.et_contact_bottom_container{
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
}

Once you add the CSS, the submit button would be aligned to the center as shown below.

Center Aligned Submit Button – DIVI

CSS to Left Align the Submit Button on DIVI Contact Form

You can also align the button to the left, by changing the CSS to the following

.et_contact_bottom_container{
display: flex;
justify-content: flex-start;
width: 100% !important;
}

I hope this tip was helpful for you. For more DIVI TIPS and TRICKS make sure you visit my DIVI BLOG.
If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts –

• Center the DIVI Footer Menu and Bottom Bar Contents

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

In today’s tip we will see, how we can center align both the Footer Menu and the contents of the DIVI Bottom Bar. The footer menu will only be visible if you have assigned a menu in the display location of “Footer Menu” in your WordPress dashboard . This is done by navigating to Appearance –> Menus as shown below.

Assign Footer Menu in DIVI

Once you have your footer menu assigned, you can change the background and text color by navigating to
DIVI –> Theme Customizer –-> Footer –-> Footer Menu

Editing the Bottom Bar :

You can add credits to the bottom bar like copyright info, company name etc by navigating to
DIVI –> Theme Customizer –-> Footer –-> Bottom Bar –> EDIT FOOTER CREDITS

You can also adjust the color for your social icons here.

Footer Content in DIVI

My Footer menu and bottom bar looks like the following without the CSS.

Footer Menu and Bottom Bar in DIVI

Center the Footer Menu and Bottom Bar Contents in DIVI using CSS

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* Center the Footer Menu in DIVI */
.bottom-nav {
float: none!important;
text-align: center!important;
}

/* Center the Bottom Bar in DIVI */
#footer-info {
width: 100%;
margin:0 auto;
text-align: center!important;
}

/* Adjust the margin of the social links DIVI */
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px;
}
}

Once you have applied the CSS the footer menu and the bottom bar content should be both center aligned as shown below.

Footer Menu and Bottom Bar centered in DIVI

I hope you enjoyed this quick tip and were able to center your Footer and Bottom Bar in your DIVI Theme. If you do not have a Footer Menu then only use the relevant CSS. For More DIVI TIPS and TRICKS make sure you visit my DIVI BLOG. If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts –

• Add Background Image to the DIVI Footer/Bottom Bar
• How to Remove the Bottom Bar/Footer from DIVI
• Remove Social Icons from Bottom Bar/Footer on Mobile in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Aligning the DIVI Secondary menu to left or center is easy with a few lines of CSS. When you create a new menu in DIVI you can assign the default location for the menu to be the Primary, Secondary or Footer menu. Today’s tip is for aligning the Secondary menu.

Make sure you have a existing secondary menu ( which appears on top of the Primary menu ). In the image below I have created a new menu called “Secondary Menu” and have set the display location on the bottom to be the Secondary Menu.

Secondary Menu display location in DIVI

The image below shows the Secondary and Primary menu. As you can see, by default the secondary menu is aligned to the right.

Location of Primary and Secondary menu in DIVI

We will now add the CSS for alignment of the secondary menu. Head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the css in the Custom CSS box.

Secondary Menu Aligned to the Left

Add the following css to align the secondary menu to the left.

/* Secondary menu to the left */
#et-secondary-menu {
float: none;
}

Secondary Menu to the left in DIVI

Secondary Menu Aligned to the Center

Add the following CSS to align the secondary menu to the center.

/* Secondary menu to the center */
#et-secondary-menu {
float: none;
text-align: center;
}

Secondary Menu to the center in DIVI

I hope this tip helps you to quickly align your secondary menu in DIVI using CSS. You can browse through my other useful tips for DIVI and WordPress on my DIVI Blog.

Related Posts –

• Hide DIVI Top Header/Secondary Menu on Scroll
• Center the DIVI Footer Menu and Bottom Bar Contents

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.