Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



Blogger How To: Center Your Header

Sometimes all you want is a quick fix. You’ve uploaded your Blogger header on the Layout page but it’s aligned to the left. You want it centered horizontally over the content section of your blog instead. Here is how to easily do that!

1. In Blogger, go to Template > Customize

2. Click on the Advanced tab then scroll to the bottom of the second menu and choose Add CSS.

3. Copy and paste this code into the text box (click then press CTRL + C to copy, then CTRL + V to paste):

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

That’s it! Done like dinner.


  • Nur Shahirah Isnin

    Hi Dana! Thank you so much. This helps a lot.

  • Been trying to figure out how to do this for so long! Thank you πŸ™‚ Can I ask how you center the page links too?

    • Just finished up a post on this. It will be up within the next couple of days πŸ™‚

  • Emma Holmes

    it doesn’t seem to be working…i already had a code in there…how do I add it in the right area?

    • do you have a customized template? what is your blog URL?

  • This worked and it was so easy! Thanks! my header has been bugging me for ages

    http://hellocynicalbadger.blogspot.co.uk/

  • I am not sure what you mean because looking at your blog, the header is the same width as your content area and already justified…

    • Benjamin Rubin

      I ended up searching relentlessly all night and finding a solution. Thank you for help!

  • Easy Peasy THANK YOU! <3

  • Wendy Kilgariff

    Fantastic, thanks so much for your information, it is incredibly helpful. Amazing, can’t believe it worked, loving your tips to help me build my first blog.

  • christy baez

    Thank you for sharing !

  • Cara

    Perfect thank u! xx

  • Jaz

    Thanks so much for this. I just started my own blog and this was a godsend.

    jesamidesigns.blogspot.com

  • Jessica Mennie

    Wow! I cannot thank you enough for this! I’ve been looking for a simple solution since I started! Followed you on bloglovin πŸ™‚

    https://www.bloglovin.com/blog/13414617

  • Kristin S

    Thank you thank you thank you!!!

  • Angi at Cokie Pop Paper

    I have a customized template. Is there a different way to get a header centered? This method is not working for me. Thanks!

    • Without knowing how your template was coded, I can’t be much help unfortunately!

  • Melissa Baez

    This was just what I needed!!

    Thanks so much for this post. Now my header is finally centered, yay!

    Melissa @ http://eversomela.blogspot.com/

  • Thank you for all your help! The fact that I can now have my Header and Tabs in the centre of the page makes my day!! πŸ™‚

  • Thank you! It’s just what I need πŸ˜€

  • thanks a mill!!!

  • Sophie D

    Great! My header image is kinda small, and it really helps to center it!

    http://fakeitforthecamera.blogspot.co.uk/

  • Thank you so much! Didn’t even know I needed this! x

  • Fanmode Distro

    awesome! this worked for me! since i already found a “#header-inner” in my template i just added the “text-align:center” under it. πŸ˜€ but now how do you center the pages tabs?

    http://philippinefundraisers.blogspot.com/

  • Katie De La

    Thank you! This has been annoying for some time now!

  • Michele Gorham

    Thank you!! this was soooo annoying!! Quick and easy fix!

  • Hanjing

    Hi I need help!! I have centred my header but there is this annoying white border on the left side of the header image :((
    Any solutions to this??
    Thanks in advance!!

  • ER Heart Albay

    Hi. Thank you so much for this post. I finally enjoyed by getting my blogger title at the center!

    http://itsallaboutthesearchbar.com

  • roshantha

    Hi, I did according to your instructions. But for some reason it is not working for me.
    here is link to my blog
    http://www.excelvbasolutions.com

    I have following part in my CSV text box. I entered your code below that.

    #BlogArchive1 {
    padding: 20px;
    border-radius: 25px;
    border: 3px solid #000052 ;
    width: 260px;
    background:#F0F5FF;
    box-shadow: 3px 3px 3px #000052;

  • Thank you so much! πŸ™‚

  • Livo

    Thanks so muchhhhhhhhhhhh.!!! (^.^)

  • Paul Murray

    All went like clockwork, thank you, BUT, I cannot find any “confirm/save” type button, and my little change just won’t happen, Help !

  • George Love

    Thank you, so much. you are amazing

  • Hollie

    Does this still work if you’ve uploaded your header as a html? Doesn’t seem to work for me! πŸ™

  • Thank you so much!

  • Sara Cart

    Thank you. I can’t believe how frustrating this was!

  • elcamino99

    The css code to center the blogger header is not working for me http://www.cloudsoup.cc Anytips? Thx

  • thankyou so much for this!.

  • Janyce Denise Glasper

    Thank you!!!!!!!

  • Varia ツ

    wow!! it works!! thanks dana..~ love from India xx

  • Le chic bride

    Hi Dana, I have trouble with my header πŸ™ I have not find a solution yet, the picture is showed in the center but in a small square format – it is actually long – I would REALLY appreciate your help!!!

    http://lechicbride.blogspot.de/

    Greetings from Germany πŸ™‚

  • Jona OA

    thank you

  • ThamΓ­ris Maria

    Thanks, thanks <33

Navigate