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

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

Post last updated:

45 responses to “How to center the header image and header text in blogger”

  1. Thanks for this tip. I’ve removed the border but how do you center ?
    Your tips are great. Thank you.
    Adela x

    1. Thank you! Have you tried the above steps to centre your header?

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

    1. No problem ๐Ÿ™‚ I have a couple of posts coming up about navigation menus that may help you edit the pages tab. I do have this post about removing borders from the page tabs – http://xomisse.com/remove-borders-from-page-tabs-navigation/ Do you have anything in particular you’d like to change? x

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

  4. lavander_tea

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

    1. Perfect, so glad you got it sorted. Oh cool, make sure to let me know what it is when you publish it ๐Ÿ™‚

  5. your tutorial was very very very workerd!!!!
    I’ve been long time tried to figure out how to make header centered.
    Thanks a millions…

    1. No problem, happy to help ๐Ÿ™‚

  6. Jonovan

    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!

    1. Hello. Go to Template > Edit HTML and place the code above ]]> </b:skin> in your CSS section.

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

    1. Try add #Header1_headerimg {text-align: center; margin: 0 auto;} to Template > Edit HTML > above </b:skin>

  8. This is super easy to follow and has helped a bunch. Thanks!

  9. Rbagnall

    Perfect!

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

  11. Worked like a charm

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

    1. Hello Mel! Thank you so much ๐Ÿ™‚

  13. Thank you!!!! This was driving me crazy.

  14. I still cannot figure out how to center my header. I’ve tried all of these steps, I don’t know what I am doing wrong. Can you help?

    1. Hello Christina, there’s an error in your CSS. Go to Template > Edit HTML and find ]]> </b:skin> above it you added the following code ]]> </b:skin> #Header1_headerimg { margin: 0 auto !important; text-align:center !important;} remove the ]]> </b:skin> from that as it’s automatically in your code and save. Here are two posts that may help you find the code – using Bloggers HTML editor + Understanding Bloggers CSS section.

  15. 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. ๐Ÿ™‚

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

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

      1. It still doesn’t work, thanks for trying to help anyway.

        1. You need to remove the 0 230px values.

  18. 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 ๐Ÿ™‚

      1. Thanks for checking! I changed them, but it’ll still not centering. So weird.

        1. Now add .header-inner {text-align:center;} to your CSS ๐Ÿ™‚

          1. Beautiful, it worked! Thank you so much! ๐Ÿ™‚

  19. Hey there !!
    Great tutorial. It was very helpful and very easy to follow.
    Thank you for your help !!!

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

  21. thank u so much… this was realy helpful….i love reading ur tutorials

  22. Laura

    Thanks you!!!

  23. I put them all in and nothings centered
    http://breakthroughtattoo.blogspot.com/

    1. Hello, you’ve got a custom theme which has a margin-left value on .page_body, remove this and it will be centered.

  24. It worked for me. Thank you.

  25. Cherish

    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

    1. Hello ๐Ÿ™‚ yes there are a few ways you can do this. Here’s one example demo with code, second example code or third example using FlexBox

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.