How to center the header image and header text in blogger

By default, Blogger aligns your header image to the left. The majority of bloggers like to have their banner centred so here are a couple of ways to alter you blog header image so that it sits in the middle of your blog.

This is really quick and easy to do but it can make a huge difference to your blog. The header is one of the first things people see when they click onto your blog and many will judge your blog on it so it’s important to have it looking balanced.

Centre header image on Blogger

Go to Template > Edit HTML and add the following code above ]]> </b:skin>. If you’re having trouble finding ]]></b:skin> then check out this post for help.

#header-inner img {margin: 0 auto;} 
#header-inner, .header-inner {text-align:center;}
#Header1_headerimg { margin: 0 auto; text-align:center;}

You can also centre your blogs header by making it a block element with a fixed width. Add the code below to your CSS section (before ]]></b:skin>) and edit the width to match the width of your image.

.header-inner .Header #header-inner { display: block; margin: 0 auto; width: 750px; }

Centre header text on Blogger

Go to Template > Edit HTML and add the following code above ]]> </b:skin>. If you’re having trouble finding ]]> </b:skin> then check out this post for help.

.titlewrapper {text-align: center; }

Save your changes and your header image or text will now be centred.