How to Center Your Blog Header on Blogger

How-to-center-blog-header

Hello everyone!  Tiffany here! It’s so great to be here and to begin sharing all kinds of tips with you!  Today I’m going to share a very simple trick to get your blog header to be centered!!
The blogger template I’m using is probably one of the most popular ‘Picture Window’, but this tip can be used with most any template!

The problem is the width of my blog is actually wider than my pretty header image.  Don’t you just love this pretty header?  It was a freebie from Keren, find it here at Free Pretty Things for You! Before I added it to my blog I brought it into Photoshop and added a lovely verse!

But it would look a lot better if it were centered on top of my blog!  So here are a couple of quick steps to make that happen!

Center Your Blog Header Image

1.  First go to  TEMPLATE > CUSTOMIZE > ADVANCED > ADD CSS

2.  Choose the code that best fits your needs below!  Copy & Paste it in the space as shown above. *Please Note* Hit your ENTER Key after you paste the code snippet.

Option A:  If you used INSTEAD OF TITLE AND DESCRIPTION option:

With this option the image was added as a <img> HTML element. Use these code snippets to align the element.

To Center:

To Align Right:

The ’300′ number can be adjusted higher or lower to move your image left or right.

To Align Vertically:

The ’50′ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.

Option B:   If you used BEHIND TITLE AND DESCRIPTION option:

When you choose this option, Blogger added your header image as a background to the header.  To align it you need to add one of the follow snippets of code:

To Center:

To Align Right:

All Done!!  Oh that is so much better!!   Below are a few extra aligning tips for your headers!!

Line Up Your Header Text

If you would like to Line Up your Header Text (Title & Description) then use of one these snippet codes: These codes will work with text-only header and the text in “Behind Title & Description” image placement option.

To Center:

To Align Right:

To Align Vertically:(apply top padding)

The ’50′ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.  Also, to adjust the Description use .descriptionwrapper

Line Up Image & Text Side by Side

Use one of these snippets if you want to split up your header into 2 parts positioned side by side, an image and text: These codes will work with the “Behind Title & Description” image placement option.

To Place Image on Left & Text on Right:

Increase left padding to push away texts to the right of the image header

To Place Text on Left & Image on Right:

Increase right padding to push away texts to the left of the image header.

It has been such a pleasure to share this tip with you today! Feel free to share your comments or questions below!
Swing by my shop at Tiffany Doodles Digital Stamps any time! I’d love to have you over!  At least come by and pick up a new freebie every Thursday! =)

135 Responses to “How to Center Your Blog Header on Blogger”

Read below or add a comment...

  1. How wonderful is this!!! Tips from Tiffany on the one and only Free Pretty Things for you!!!! LOVE IT and love the addition to the blog my friend…it is AWESOME for all of us that are “digitally impaired” !!!! Thank you for always being so incredibly thoughtful and always lending a helping hand! A BIG thanks to you too Tiff…if I may call you that : ) you ROCKED this tutorial…(shhhhh….don’t tell anyone…especially my son…I actually think i understood it : ) lol!!! we don’t want that to get out then that would mean more work for me! Take care girls and THANK YOU THANK YOU THANK YOU!!!!! tons of hugs!!!! Here’s to MANY more tips from Tiffany!!! : )

  2. Tiffany says:

    Thanks for the enthusiastic feedback Andrea!! We would love to hear thoughts on future tips and tricks too!! Thanks a bunch!

  3. Monic says:

    Thankyou tifanny!
    i’ve been looking for this tutorial. helpful as always!

    GBU unlimited :)

  4. elyse says:

    thank you so much, tiffany! this was super helpful and easy to follow. i’ll be by to visit your blog soon!

    xo
    elyse

  5. Erica P says:

    Thank you sooooooo much for this!! I’ve been trying to find a simple way to do this for ages without having to go into the html code!

    =)

  6. Lisa D. says:

    Thanks for the great tutorial. I had found a way to cheat so that my header looked centred but after creating a new one to match the badge I created, it was best to learn to centre it properly. I’ve had an appt. to visit this post in my calendar since I came across it in November so was finally able to put your tutorial to use. Thanks again for the great tips!

  7. Lenet says:

    Thank you so much!!!

  8. Sara says:

    You are amazing! I’ve been searching for soo long for that answer! Thank you so much, you are a blog-saver!!

  9. Mary Carr says:

    Thank you so much for sharing this tip! I’ve been trying to make my own template, and centering the title has been driving me crazy!!!!!!!!!!

  10. Stuart says:

    Thanks for explaining this tip so well! Several other people had the same tip but they had me rooting around editing the CSS directly, whereas this elegant solution fixed my problem in a couple of minutes.

  11. Ann says:

    THANK YOU, THANK YOU, THANK YOU!

  12. Marie says:

    Thank you! This was super helpful !
    Happy Saturday
    Marie

  13. Ash says:

    I have having trouble finding out how to centre my blogger header, until I read this. Thank you so much. :D

  14. Darlene S. says:

    Thank you so much for posting this easy to follow code! The CSS trick took 5 seconds for me! THANK YOU!

  15. Gabrielle says:

    Thank you thank you! I found your tutorial via Google and it worked perfectly!

  16. Kayleigh says:

    This doesn’t work for me, I don’t know what I’m doing wrong :( xxx

  17. Caroline says:

    Brilliant! Thank you.

    I searched & searched for what I was looking for and then, BAM, you had exactly what I needed :)

  18. Holly says:

    Thank you so much! I was wrestling with that one for a while! I have taken an extended vacation from blogging and have to learn how to do all of this again. Thank you so much for this post. Saved me from pulling my hair out!

  19. Laura Lynn says:

    Thanks so much! Your CSS code worked like a charm for my header image :)

    Bear hugz,
    Laura Lynn

  20. Tiny says:

    Gah! You’re a life saver! THANK YOU

    I’ve been looking for something like this tutorial for what seems like forever. And I’m glad I found it. Thank you for being awesome! Now i can do a lot with this, and get my blog up and running smoothly.

    xxTiny

  21. Chandani says:

    Thanks for your help!!
    Do you have any other tips on here?
    Would really be great help.
    Thanks once again :)

  22. thank you so much for this entry! anytime i google ‘how to….on blogger’ i come across tutorials that are either impossible to understand or you follow it to the letter and it still doesn’t work.
    not this time! you make it so easy to understand and achieve the desired result.

  23. Megan says:

    THANK YOU for this tutorial! I was getting so frustrated that it wouldn’t center and was thankful to find this for help!

  24. Van says:

    thank you so much for this. it really helped me a lot.

  25. Megan Willis says:

    This is great! Thanks so much I used it for my blog.

  26. Jackie M. says:

    I love you! Thanks so much for this tip! You saved me from a hundred wrinkles and frowns. >hug<

  27. Thanks so very very much for this mega useful information! Had been struggling for a good couple of days trying to get my header sorted! Thanks again x

  28. Laura Bright says:

    Thank you so much. You just saved me a ton of time in photoshop.

    Laura

  29. Zainodis says:

    Thanks a ton, this was really helpful :D !

  30. A.Michelle says:

    Thanks so much for this blog post! It was really helpful.

  31. Keir says:

    THANK YOU! Worked a charm!

  32. Stacey Y. says:

    oh my gosh….thank youuuu soooo much for this!!!! I’ve been trying to figure out how to center my blogger for forever now. I went thru and did what you said and it still didn’t work….so then I read it again…and I realized I didn’t press “enter” after I entered the code snippet. I now have a nice, centered blog header. Thank you again!!!!

    {I found your blog through goggle.}

    Stacey
    theyarbroughsblog.blogspot.com

  33. charlene says:

    Thank you so much !!! I was about to start throwing things trying to get my header centered.

  34. Tony Yotes says:

    Thank You! This was the most straightforward and easy answer I found today. Everyone else has you running through the HTML looking for specific lines.

  35. niamh says:

    THANK YOU SO MUCH FOR THIS!!!!! I’d been trying to do this for ages, just free styling my way around the edit section, changing the sizes of the pictures I was using, the width of my page, even my whole template! Then, I found this, and MY did it help!
    Once again thank you so much for this!!!

    Much love Niamh x,
    Fire Walking From My Bedroom

  36. sonya says:

    thanks alot …ily for this <3

  37. Joshua says:

    Thank you for this. I’m a first time blogger, learning every step of the way. Stumbling over little nuggets like this makes a world of difference. Your time invested in making this post is appreciated.

    -Joshua

  38. Ali Gilbert says:

    This was soooo helpful!!!! Thank you so much!

  39. Amy Ballou says:

    You my dear are a life saver, thank you for posting this!

  40. rebecca says:

    Hi! I’ve tried to use this but it didn’t work, and I think it may have something to do with my adjusted widths of my blog. Is there any way you can help me out?

    Rebecca

  41. samantha says:

    so helpful thank you!

  42. Stacey says:

    After hours searching online to learn how to move a photo on my blogger blog, I finally stumbled upon your website. In a matter of seconds, you helped. Thank you so much for everything! HUGS – Stacey

  43. Thank you so much! I just had to Google once, and yours results were on the first page and my first attempt and it worked! TQ!

  44. Master Yoda says:

    Well done! My blog looks pretty enough.
    Thanks, really I need this.
    May the force be with you!

    Greetings from Turkey.

  45. jeanine says:

    Thank you!! Very helpful info!!

  46. Coco C says:

    Exactly what I needed! Thanks tons!!!!!!!

  47. Novi says:

    it works! Thank you…

  48. This really helped, my blog looks better now! Thank you and have a nice day! ;)

  49. Batu says:

    This is soooooo amazing! Thanks for the tip! Love it!

  50. Anonymous says:

    thnx mate

  51. Izznul says:

    thank you so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  52. My Linh says:

    Amazing!! Easy instructions and it worked perfectly…. a centred blog header :) Thank you!

  53. This was helpful! after how many weeks of looking for how to do this.

  54. Lina says:

    Terima kasihhhhhhhhhhhhhh, thank u sooooooooooooooo much indeed.
    It’s very helpful indeed …;this is d one i looked for.
    And i know now how to manage that “look”

  55. Laura says:

    THANK YOU! This has been driving me crazy….appreciate your help :)

  56. Rokawaiiza says:

    THANK YOU SO MUCH ♡

  57. Melanie says:

    You are amazing! Thank you!

  58. moubarak says:

    Thank you very much I have researched a lot on this explanation and fortunately I found it in your blog:)

  59. Kate says:

    Thank you so much!! Quick and easy and now it won’t drive me crazy anymore(:

  60. ang says:

    thank you so much! this really helped me make my blog look more professional!!

  61. Beth says:

    just found this and thank you so so much! all the information was so easy to follow and a huge big help! thanks again! :) XXX

  62. Julie says:

    If I could kiss you over the internet I would! Just what I was looking for and it works, my header being just off to one side was stupidly annoying me – no more! Thank you so much. I’m going to look for ways to follow you/share this right now :-D

  63. OMG!! this is so awesome!!! Thanks so much!! It worked like magic :D Im so happy!!!
    May Allah bless you my dear <3

  64. Sarah C. says:

    Thank you so much! This was driving me bonkers!

  65. Thank you! Just what I needed to customize my blog

  66. Anonymous says:

    Thank you for this!

  67. Beth says:

    it doesn’t work for me :( don’t know what i’m doing wrong! i paste the code in the CSS box and apply it but nothing changes and the code is just written at the top!
    PLEASE HELP?

  68. Peggy says:

    Thank you, thank you, thank you! I think it’s centered better! (bookmarking this great “tip” place). And I do love your sweet butterfly header! I should have rounded the edges on my image but it’s OK for now… thanks again. Quick and easy peasy! {Ohhh, you might wanna add to delete any prewritten stuff in the Add custome CSS box before adding yours. at least mine had something already there to center but it sure didn’t look center, it looked more to the left align… in Blogger and I do use the picture window too!} Bless you … Peggy

  69. Erika Michel says:

    OMGGGGG – i just googled “how to center header on blogger” and boom! – your steps are so simple to follow! :D
    Loving your graphics as well!!! <3 THANK YOUUUU

  70. Anonymous says:

    Thank you sooooooooo much! It was driving me nuts that my banner was not centered and I am OCD so that makes it worse :) But I followed your steps and it is now centered. So thank you! Thank you thank you thank you!

  71. Lyda says:

    Thank you! This helped me soooooooo much. I am OCD and seeing that my banner was not centered drove me nuts :) I followed your steps and my banner is now centered! Thank you thank you thank you!!

  72. Ahhh this is brilliant – thank you!

  73. Ali says:

    THANK YOU!!!!!!!!! I have been messing with the logo at the top of my blog for HOURS!!!! You rock! normaltownnest.blogspot.com

  74. The Stamp Cellar says:

    Thank-you for this – it works wonderfully and my blog looks so much better.
    James

  75. SparkS says:

    tnx.

  76. Ali says:

    Oh my gosh! Thank you so much for that easy trick. Worked like a charm.

    Ali x

  77. Morgan says:

    This was perfect and so incredibly easy with your help! Thank you!!

  78. Thanks so much!! That helped me a lot with my blogs.

  79. Emily says:

    This helped me so much, thank you!

  80. fatin says:

    thank you !!

  81. Sean Carroll says:

    May the road rise up to meet you.
    May the wind always be at your back.

    Thank you very much for the guiding simplicity

  82. Alexandra says:

    Thank you so much–you saved me so much time! I was tearing my hair out!

  83. Kate says:

    Great tut! Thanks!

  84. Arwah says:

    Thank you so much!

  85. C. Shania says:

    Thank You so much :D

  86. Cristeen says:

    AHHH! Thank you so so so much!!!

  87. Amy says:

    Thank you so much for this!!!!! I am new to the whole HTML thing. I was so exited that this worked for me, and it was easy to understand your instructions too.

  88. Dcroix says:

    thanks it helped alot with my design

  89. Karolayn says:

    Thank you it worked perfectly

    http://blackclassylongline.blogspot.com

  90. Tara says:

    Hello! This was simple and easy to follow! One thing worth adding maybe is that you have to erase the code that is already there, then add the new one :) I know its common sense to most, but I didnt do this first and then went back and did it and saw the centered banner after that! Thank you again!

  91. Katie says:

    Oh great, thanks for this. I’m not tech savvy but this was so easy to follow. Thanks Tiff

  92. Samantha says:

    Thank you so so much!

  93. Angeline says:

    This is great! Thank you!

  94. Anonymous says:

    thanks for this superb tip! :)

  95. Bridgit says:

    THANK YOU SO MUCH! I have been trying to figure out how to center my header picture for months now and have had no luck finding information, until your post! Now my blog doesn’t look crooked!

  96. Erika Garza says:

    Woot! Works like a charm, thank you!

  97. Michael Leng says:

    Oh! Your article helps my blog be as my expectation. Thanks so much. :)

  98. Tyna says:

    I tried a few other sites and only yours worked out. Thank you!

  99. Miss Rhea says:

    Thank you so much for this tutorial. :) Helped me a lot in centering the header of my other blog. Kudos!

  100. Cai Chunmin says:

    thanks

  101. Ando says:

    Thanks, worked a treat! I like how you provide different options too :)

  102. Heidi says:

    Thank you so, so much! I was having such a hard time until I found your post. Didn’t realize that different code was needed for “behind title and description”!

  103. Dear Tiffany, tq soooo much. Your tips really help me!

  104. This was so helpful! Thank you!!! :)

  105. Thanks much! It was a huge issue before and now you gave us the solution! :-)

  106. pamela says:

    Thank you sooooo much! It was so easy, I was afraid it wouldn’t work. I found this when I was about to give up on getting my photo centered. Brava!

  107. Ellie says:

    I’m just venturing out into the blogging world so this post was so so helpful and easy to follow! Thank you!

  108. Gia says:

    This post helped me so much! I searched everywhere on how to centre my header image on my blog and none were very helpful until I stumble upon your blog! This really helped me a lot, thank you! :)

  109. Thank you so much for this!! It fixed all my problems :) #headacheisgone

  110. 지화 says:

    thank you very much.

  111. Pavi says:

    Thanks a ton! I have been looking around for such an awesome solution to center my blog header.! It worked n seconds!

    But the page tab… It still is from the lefft most corner.. Any way to bring that to center too?

  112. Michelle says:

    Thank you so much! This was exactly what I needed! So easy!

  113. Elizabeth H. says:

    Thanks for the awesome tip!! Worked perfectly!

  114. AZIZ says:

    thanks for your help

  115. Karen says:

    Thanks so much for sharing

  116. iza says:

    thanks…you really a life saver… oppsss…a blog saver… ^_^…

  117. Betka says:

    Thanks! You’ve got amazing tips and this article helps me so much! :) You’ve got a follower and big fan also from Slovakia!!!

  118. Merilee S says:

    THANK YOU! :) LOL I have been working on this all day as a newbie. This was so easy. Wow.

  119. PRGirlAngel says:

    I literally spent the last 3 days trying to figure out how to center my logo in my header. Finally I did what I swore I wouldn’t do, ask Google. Needless to say your very informative sight came up, and your instructions are clear and to the point and I fixed the issue in 30 seconds. I greatly appreciate this blog, and will be bookmarking it for future reference. Thanks a million, and a million again.

Speak your mind..