Centering the Dots Header

In a previous post, we looked at how we can make the header widget of the Dots (and Dark Dots) template go across the blog. If you have a somewhat longer blog title, that tweak will allow you to have it across the blog rather than having it stuck inside the left sidebar.

In this post, we look at another simple tip that will center align the title and the description of such a widened header widget. All you have do is to add a single CSS rule to the #header-inner selector.

This change is illustrated in the code snippet below.

#header-inner {
text-align: center;
background-position: center;
margin-left: auto;
margin-right: auto;
}

Yes, that's all. Just add the line shown in red above and you will have the title and the sub title centered in the header.