WP SITES

2296

Original Genesis Tutorials & 5000+ Code

Snippets

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