• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Center HTML Content In Sidebar Text Widget

This tutorial provides a simple solution to center any HTML content you add to any text widget in any sidebar widget area.

Here’s the forum question this post answers:

I just added a “Follow Me on BlogLovin’ ” Widget to my sidebar. How do I get this centered?

Here’s an example of a HTML follow button added to a text widget in the primary sidebar:

not centered

And here’s the same HTML button now aligned center after adding some CSS code to the style sheet:

center text widget

And here’s the CSS with 3 options to choose from:

#text-8 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

In the above example, i’ve used the text widget I.D which you can find using Firebug.

You could also replace #text-8 with one of these:

.widget_text or .textwidget

The only problem is, this will effect all text widgets in your sidebar so you would only use these 2 classes if you are only using 1 text widget in your sidebar, otherwise use the I.D.

Related Posts

  • Style Widgets Individually – Beginners Guide

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.