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.
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;
}OR
First, choose the one-column layout for the footer widget, using the menu Appearance >> Customize >> Footer Widget.
Insert the CSS code given below to the Custom CSS section in the customizer.
div#footer-widgets {
text-align: center;
}
#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; }
}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?
Hi.
I am trying to balance my footer area in SINATRA by making the third (right-most) footer align right. None of the CSS I’ve seen online seems to work in SINATRA.
Thanks.
rh
The code provided fro Divi doesn’t not work. It centers whatever you have in the footer bar but doesn’t center the widgets at all.
Hi Garrett, did you find a solution to this?
Hi there,
Customizing the CSS seems to not be an option with the paid tier I have on WordPress. When I follow your excellent directions, above, I’m directed to purchase a premium plan. Any way around that?
Centering of widget in footer by this snippet in the extra css box;
.site-footer>.site-info{justify-content:center;}
Glad it worked!
I have the theme Donovan, and none of all the codes I have found makes the footer align in the middle and it drives me crazy
The code for OceanWP doesn’t work.
Hi Daniela, try to use the second alternative given in the post. That should work.
Hi Melba. The other alternative does not work either.
Thanks, I was able to center my image in a footer widget in divi
works but mine had no ‘s’ on Widgets… was widget.
.footer-widget {
text-align: center;
width: 100%;
overflow: hidden;
}
thank you!
Hi! I seem not to be able to center my footer widget. I am using the blank canvas theme. Any help?
This was extremely helpful and help me ensure that my footer was centered. Thank you for having this information availabe!