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.

center header image in blogger

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; }

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

42 comments

  1. Megan leigh on

    This was soooo helpful thank you!
    I’ve been looking everywhere on how to edit the pages underneath the header to make them look a little nicer, do you have a post on that?
    Megan xx

    Reply
  2. Sarah on

    Your codes worked! Thank you so much! <3
    I have finally managed to 'center' my blog header.
    Plus I have followed you on FB!

    Keep up the good work & do follow back k?

    Cheers <3

    Reply
  3. lavander_tea on

    I’ve tried several codes from different websites and bloggers only yours worked! Thank you so much! I am starting my own blog.

    Reply
  4. Jonovan on

    Hi I was wondering where we insert the code at in the html? Ive tried a couple different spots, but it just shows the code on the page when viewing my blog. Thank you!

    Reply
  5. Bethan on

    Hi, i’ve tried everything but my header picture still won’t centre. I adjusted the width of my blog post and sidebar to how i wanted them but the header just goes to the left.
    Please help?

    heyitstoots.blogspot.com

    Reply
  6. Sophie on

    your tutorial is amazing!! I am starting my new blog and your explanation was so much easier to understand ! But i can’t seem to centre my navigation bar ?? Please help. Thanks

    Reply
    • Ellie M on

      Thank you ๐Ÿ™‚ go to Template > Edit HTML and above </b:skin> add .tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none;}

      Reply
  7. Mel the Crafty Scientist on

    Thank you so much for all of the super-amazing blogging tips and tutorials you’ve posted! I’ve messed with my blog’s design in the past, but was having some serious trouble with various things and making them work in Blogger’s revised template and format so your tutorials have been perfect! Thank you so much! I really appreciate it! : )

    -Mel the Crafty Scientistย 

    Reply
  8. Caitlin on

    This was so helpful. I’ve been trying to personalize my blog for a while now and finally had success! Thank you for your great suggestions. ๐Ÿ™‚

    Reply
  9. Alice on

    Hello Elaine! Let me just say that all of your tutorials are just so easy to follow and are making my blog exactly how I want it to look, you’re truly AMAZING.

    Thanks A LOT!

    Reply
  10. Anna Searle on

    Hi, these are the best instructions I have found so far, but its doesn’t matter what I do nothing changes. I just don’t know where I am going wrong. P.S. if you need to see my code I’m not sure how to show you. I tried following the instructions below but didn’t get it.

    Reply
  11. Danielle Pientka on

    So I tried this tutorial, but I realized it’s not working because my header isn’t from the Blogger header widget, but rather an HTML widget. As a result, the “header” and nag bar are still on the left. Any suggestions (or a link to another tutorial on this)? Thanks so much ๐Ÿ™‚

    Reply
  12. Jay on

    Great tutorial, but I can’t seem to get my header image to center. I’ve been staring at the code for a good hour now & tried all your suggestions of changing it. Could you take a look for me please and let me know what I’m doing wrong? Still getting my head around CSS. Many thanks ๐Ÿ™‚

    Reply
    • Elaine M on

      Hey. Your header image is larger than the header space, so it thinks it is centred but because of the larger size it’s overflowing. You can reduce the image size and reupload, increase your blog width in the Template Designer or just increase the width of the header area using this tutorial. Hope that helps!

      Reply