HOW TO: Center your header, tabs, and any other widget

As strange as it may seem, it was not until just VERY recently, when I decided to re-design my blog a little, that it occurred to me that there must be some way to center my header. There was, and (as you can see) I have centered my header. I might also add while babbling about my re-design, that the proportions of this blog are simply frabjous.
To start with, the whole thing is based off the numbers 3 and 7 now, where it wasn't based of anything at all before. I find 3 and 7 to be wonderful numbers for designs, being very pleasing to the eye, and they worked perfectly for me. Three content sections: two sidebars and a post area. The side bars are each 300, and the content area is 700. The full width of the blog is 1300. And there are seven tabs in the page list, and in the drop-down under "I LIKE..." there are 3 options. The left sidebar sports 3 accordion drop-downs. But enough about that.
Moving on to the actual purpose of this post.
Keep in mind for the duration of this post and any other on this blog: a Widget and a Gadget are THE SAME THING.


There are many different ways to center widgets. I will do my best to explain the difference in each of them, but in the end, for you as it was for me, it will probably just be a completely random decision based on whim more than anything else.

Many of your sidebar widgets are probably third party HTML. Your own "grab my button box" the buttons of other sites. Certain pictures, links. All kinds of things. There are three ways to center this content. They all work in the same way, but I have always used the top one, merely because, for me, it is easier to remember. Go to Dashboard>>Layout>>Add Gadget>>HTML/JavaScript

<div align="center">YOUR CODE HERE</div>
<center>YOUR CODE HERE</center>
<p align="center">YOUR CODE HERE</p>

You can add the CSS rule to ALL widgets by going to your Dashboard>>Template>>Customize>>Advanced>>Add CSS
Paste either of the following codes, and save template.

.widget {text-align: center;}

And finally, you can pick individual widgets and center them with this code. If your not sure, you can learn How to quickly find a widget ID here

#Your-widget-ID {text-align: center;}

 photo theauthor_zps8356b86b.png



  1. How do I center JUST my tabs?

    1. You will need to find the widget ID for your tabs, and then use the following method.

      "And finally, you can pick individual widgets and center them with this code. If your not sure, you can learn How to quickly find a widget ID here:

      #Your-widget-ID {text-align: center;}


I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)