In blogger blogs, the blog header falls in left by default. However, it looks better if the blog header is aligned in the center. Therefore, today I'll tell you how you can make your blog title/Header image to be aligned in the center. Although there are different ways to do this. But I'll tell you the easiest way to do this by adding a simple css code to the template designer of your blog.
You can center header in blogspot blog no matter whether your blog header is a plain blog title, an image or blog title with an image as background.
How to Center Align Blogger Blog Title:
If your blog header is a simple blog title text and not an image, then follow these steps to align it to center.
Before adding Code
After adding Code
1.) Go to Blogger dashboard and select your blog.
2.) Go to Template button and click on Customize button.
3.) Now select Advanced option and then Add Css option (last option in the list) and paste the code given below:
#header-inner{
text-align:center !important;
text-align:center !important;
}
4.) Now press Enter and click on Apply to Blog Button.
How to Center Align Blogger Header Image:
If your blog's Header is an image, then follow these steps to align it to center:
1.) Go to Blogger dashboard and select your blog.
2.) Go to Template button and click on Customize button.
3.) Now select Advanced option and then Add Css option (last option in the list) and paste the code given below:
#header-inner img{
margin:0 auto !important;
}
4.) Now press Enter and click on Apply to Blog Button.
Before adding Code
After adding Code
How to Center Align Blogger Header with Image as background to title:
If your blog's Header has a background image with blog title, then follow these steps to align it to center:
1.) Go to Blogger dashboard and select your blog.
2.) Go to Template button and click on Customize button.
3.) Now select Advanced option and then Add Css option (last option in the list) and paste the code given below:
#header-inner {
width: 100% !important;
background-position: center !important;
}
width: 100% !important;
background-position: center !important;
}
#header-inner{
text-align:center !important;
}
4.) Now press Enter and click on Apply to Blog Button.
After adding Code
As you can see here that both image and blog title are aligned center horizontally, but vertically the blog title is still not aligned center because the height of the image is quiet large. So if this is happening with your blog title too, then add this code also below the above code to align it in center vertically.
.titlewrapper{
padding-top:120px !important;
}
Note: Change the value 120px depending upon the height of the background image.
So, this was all about how you can align your blog header in center. See you till next next tutorial. Till then,
♥ Keep Blogging ♥
Also See:
