How to Center Footer Widget in WordPress (2019)

Many WordPress users have been facing issues in center aligning the footer widget on their WordPress site. In this post, I will show you, how to center footer widget in WordPress.

The solution to this problem is quite simple and involves adding a tiny code snippet of CSS.

How to Center Footer Widget in WordPress – Step by Step

Here are the detailed steps for your reference.

Step 1 – Login to your WordPress dashboard.  Go to Appearance >> Customize >> Additional CSS

Step 2 – Add the following code snippet in the space provided.

.footer-widgets {
     text-align: center;
     width: 100%;
     overflow: hidden;
 }

Here .footer-widgets is the class selector for the footer widget area. This may be different for your website depending on the theme that you use.

You can find out the class of the footer widget area of your theme using the Inspect Element functionality in Chrome or any other browser. More on that here – Get Started With Viewing And Changing CSS

Step 3 – Click on the Publish button to save your changes. The footer widget of your website will be centered now.

 

Theme Specific Options

Centre Widget in GeneratePress

If you use GeneratePress theme on your website, use the following CSS:

.footer-widgets {
	text-align: center;
}

Centre Widget in OceanWP

In case you are using the OceanWP theme on your website, add the following CSS:

#footer {
    text-align: center;
}
#footer .owp-social-share li {
    display: inline-block;
    float: none;
}
#footer-widgets  .widget-title .footer-box {
    padding: 0;
    border: 0;  
}

Centre Footer in Divi

#footer-info { 
margin:0 auto; 
width: 100%; 
text-align: center !important; 
}
@media only screen and (min-width: 980px) { 
    #footer-bottom .et-social-icons { margin-bottom:-28px; } 
}

Conclusion: How to Center Footer Widget in WordPress

I hope this post helped you center the footer widget on your WordPress website.

If you are unable to find out the CSS selector for the footer widget on your website, feel free to comment below and I will provide you the specific code snippet for your website.

Also Read

How to Change Widget Background Color in WordPress?

How to Minimize Redirects in WordPress?