I posted earlier about how to center your Header
Text here if you are using one of Blogger's new templates (not Minima). However, if you add one of my headers or one of your own and find that it is not centered, try this:
1. Go to
Design and click "Template Designer"
2. Click "Advanced" and then scroll to the bottom in the next column (where you see things like "Text Color" and "Link Color") until you see "Add CSS". Click "Add CSS".
3. In the box, type this:
#Header1_headerimg {margin:0 auto;}
4. Look at the Preview to make sure it worked and if it did, click "Apply to Blog"
There you go! The header is centered!
UPDATE:
This will only work if you click "Instead of Title and Description" when you upload your header.
If you choose "Behind Title and Description", it will not work. Instead, you need to add a different code. Follow the same instructions as above, but insert the following code instead:
#header-inner {background-position: center !important; width: 100% !important;}
I got this last code from BloggerSentral. Read HERE for more on adjusting your header and header text.
~Dani
Thank you so much! I've been looking for this solution for an hour! :)
ReplyDeleteperfect! thank you!
ReplyDeleteThank you so much! If I had found your blog earlier, I could have saved myself hours of frustration!
ReplyDeleteTHANKS!
ReplyDeleteThank! I've been searching blogs for about a half hour and tried about a dozen different ways to do it and this worked perfectly! Thanks so much!!! :)
ReplyDeleteBrie @ B reezyPinkDaisies
not working.
ReplyDeleteWhat template are you using?
DeleteWorked like a charm, thank you so much!!!!
ReplyDeletehttp://sheenaashlock.blogspot.com/
ReplyDeleteCan you help me?! I have tried EVERY code I can find and nothing is working!
I just looked at it on an ipad and it looked good. Is it still not centered when you view it on a computer? What template are you using?
DeleteThanks! i tried different codes already and yours just worked instantly! thanks a lot again!
ReplyDeleteIt work! Thank you very much! :)
ReplyDeleteThanks Dani....it worked and how simple were the instructions...great work!
ReplyDeleteThank you ! This was actually what I was looking for - tried lot's of different variations and this one did the job :) !
ReplyDeleteThis is not working for me. I am using Picture Windows (the first one) Template. Am I doing somehthing wrong?
ReplyDeleteLook at my update above. This should work with the code above. If not, let me know!
DeleteIt didn't work with my blog!! why is that?
Deletehi Dani this is my test blog http://bit.ly/Rj1VwE
ReplyDeletemy header image is not in center..Can you guide me please
I have created blog background and header as you guide in your tutorial
I'm not quite sure what the problem is. With the Minima template, the headers are always slightly off center to the right. But I can't tell if your background needs to be adjusted a little bit too. Can you email me your background and header? If I can look at them myself I can give you more help. My email is blogdesignsbydani[at]gmail[dot]com.
DeletePlease check your mail
ReplyDeleteI looked at your header and background and I think that your background design is slightly off-center. You can do one of two things:
DeleteYou can either adjust the background image so that the purple ribbon on the left is moved over to the right more
OR
You can shift it over manually with a little bit of change in the CSS code that you used. I am assuming that you used the following code:
<style type="text/css">
body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}</style>
Replace this code with the following code:
<style type="text/css">
body{background-image: url("Link Code"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-right:15px;}</style>
Of course, replace LINK CODE with your link from Photobucket (or wherever you stored the image).
In the first part, I meant you can adjust the background image so that the purple ribbon on the right is moved over to the right more.
DeleteOh thank you so much Dani Sis
ReplyDeleteIts working fine :)Thank you so much
and yes i was using above code , now replaced the below code it is perfect :)
thank you! i've been looking for an easy way to do this forever!
ReplyDeleteashleyreneethompson.com
Thank you!! Nice and easy peasy, perfect for me. Had been looking for a proper way to do this without changing my margins for ages! Merci xx
ReplyDeleteThank you!!!!!!!!!!!!
ReplyDeleteTrying to center the image that is underneath my header, it's not an actual part of the header. PLEASE HELP!
ReplyDeleteJess, did you enter the image through the Blogger Gadget "Picture"? If you did you cannot center it as far as I know. There are other ways around it. If you have your image uploaded to the web to an image hosting site, then you can use some html to add the image and to center it. Let me know if you want to know how to do this.
DeleteYes I uploaded my picture through the picture gadget. I would love to know how to do it the way you mentioned!
ReplyDeleteMy question is: how do you do it if you have Minima? Thanks for any help you can offer.
ReplyDeleteFrom your Dashboard, click "Template". Then click "Edit HTML" and then "Proceed". Do NOT change anything when you go into this, just look at what it says. You should see the name of the template and who designed it. If it doesn't say Minima, then you don't have Minima.
DeleteOr, sometimes you can look at the bottom of your blog and it will say the name of the template, Simple, Picture Window, etc.
thank you so much...i've been looking for this solution for a long long time ago..thank you very very much!!
ReplyDeleteThank you so much!!!!!!!!
ReplyDeleteThanks! It also works if you have "Have description placed after the image" selected as well.
ReplyDeleteThank you soooo much!
ReplyDeleteJenna @ www.rainonatinroof.com
Thanks so much! It's been making me crazy and your solution was so easy! Yay! You rock!
ReplyDeleteCan I use this for centering footer image?
ReplyDeleteHi Dani, can you look at mine? I tried using the codes above but nothing is working...my blog is melodysjourney17.blogspot.com. Thanks!
ReplyDeleteIt worked...Thanks a million!!!
ReplyDeleteMy browser is being dumb and won't let me reply directly to your questions.
ReplyDeleteNajwa, it probably will work but I haven't tried. Do you know what you would use instead of the header code? Let me know if you tried it.
Melody, your header looks good from my end. Are you still having trouble?
hi there, thanks for helping me out..check out my blog
ReplyDeletehttps://backbenchtalk.blogspot.com
oh WOW! thank you so much. I've been trying to centre my header for ages. Looks great now.
ReplyDeleteholy smokes it worked thank you!
ReplyDeleteThank you SO MUCH! I have been struggling with this on my site, www.DecoPrintChattanooga.com, for a long time.
ReplyDeleteTHANK YOU!!
ReplyDeleteThanks, really handy and easy to use tutorial!
ReplyDeletethanks so much....this is really an easy to use tutorial
ReplyDeleteTHANK YOU, worked perfectly!!!
ReplyDelete