Tutorial # 27 - How to Center the Blogger Header Image

Without any doubt, header is the most important part of your blog as it describes your blog. The header is also the identity of your blog. By adjusting the positioning of your header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.

Step 1. Go to "Template" and click the "Customize" button on the right side

Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box

Paste the following code over there:
#header-inner {
background-position: center !important; 
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Step 3. Then click the "Apply to Blog" button and you'll see the effect as shown below

Here are some other aligning options for your headers; you copy any of the following codes according to your needs:

1. Image on the right and title on the left
#header-inner {
background-position: right !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}


2. Image on the left and title on the right
#header-inner {
background-position: left !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}