How to center your header image in blogger

When you create a Blog with Blogspot or Blogger and create a header image for your blog by default, Blogger aligns your header image to the left. This is needed in cases when you decide to design your tweak your Blogger template. By default blogger doesn’t provide any option to center, so there is a little so called tweak to do so, just by adding a few lines of CSS code in you blogger template.
Lets do it.

  • Many of  bloggers like to center this header image in the blogger. This is simple done by adding a little CSS in your template and that too without any coding skills.
  • You just need to navigate to Dashboard -> Template-> Customize -> Advanced -> Add css
  • Now just paste the below code according to your settings.

If your header is set to “Behind title and description”.

Add the following code to your CSS:

#header-inner {
background position: center !important;
width: auto !important;
If your header is set to “Instead of title and description” or “Have a description placed after the image”

Add the following code to your CSS:

#header-inner img {
margin: 0 auto !important;
}

Thats it, you can now view the header image centered.

Let us know by comments if you face any problem in centering images. We will help you do so.
This entry was posted in Blogger Guides and tagged . Bookmark the permalink.