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; }
Buy me a coffeeBuy me a coffee

45 Comments

  1. 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

  2. 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

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

  4. 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!

  5. 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

  6. 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

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

  7. 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 

  8. 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. 🙂

  9. 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!

  10. 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.

    1. Hello, find the code you added #header-inner img {margin: 0 auto 0 230px;} in Template > Edit HTML and change it to #header-inner img {margin: 0 auto;}. Then your header image will be centred.

  11. 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 🙂

    1. Hey Danielle, you’ve got some CSS in your template which is floating your header area to the left which is why this code isn’t working. Look for #header-right {display:inline-block; float:left;} and .header-left {display:inline-block; float:left;} and change float:left; to float:none;. They should centre then 🙂

  12. 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 🙂

    1. 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!

  13. Hi,
    I’m experimenting on my test blogger website and want to know if there’s a way to center the header and put menus on both sides of it?

    ex] home about contact HEADER services blog freebies

Sorry, comments are closed!