Free SEO checklist

How to center the header image and header text in blogger

Published:

·

Updated:

·

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.

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up you’ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

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

  1. adela

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

    1. Ellie M

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

  2. Megan leigh

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

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

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

      Perfect, so glad you got it sorted. Oh cool, make sure to let me know what it is when you publish it 🙂

  5. thedenimhead

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

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

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

  7. Bethan

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

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

  8. Fiona Dunn

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

  9. Rbagnall

    Perfect!

  10. Sophie

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

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

    Worked like a charm

  12. Mel the Crafty Scientist

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

      Hello Mel! Thank you so much 🙂

  13. Nicole

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

  14. Christina Giannone

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

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

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

    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!

    1. Elaine Malone

      Thank you Alice!

  17. Anna Searle

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

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

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

        1. Elaine Malone

          You need to remove the 0 230px values.

  18. Danielle Pientka

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

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

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

        1. Elaine M

          Now add .header-inner {text-align:center;} to your CSS 🙂

          1. Danielle Pientka

            Beautiful, it worked! Thank you so much! 🙂

  19. Syazwanny Ramdan

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

  20. Jay

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

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

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

  22. Laura

    Thanks you!!!

  23. Tommy

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

    1. Elaine Malone

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

  24. Baisali Mukherjee

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

      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