How to center a banner image on Blogger

There are two different ways to center a banner image on Blogger blog:
By uploading an image
By embedding HTML/JavaScript Code1. Uploading an image

If you uploaded your banner image via Gadget, Blogger will automatically align it to the left. There are no options for middle and right alignment. Sometimes your header image is not as wide as the rest of your blog then it’s possible by adding CSS.

You just have to do two simple steps:

Step 1:
Upload your Header image.

Step 2:
Go to your Template Designer > Advanced > Add CSS (see below), and add this code:

.header-outer {margin-left:90px;}

You might need to adjust the “90″ value depending on how large your header is and how wide your blog is, so just play with the number until it looks right. (smaller #s will move your header to the left, and larger #s will move your header to the right)


2. Embedding HTML/JavaScript code

If you are embedding your banner through HTML/JavaScript code then it’s also possible by adding CSS. You just have to do these two simple steps:

Step 1:
Make these two little changes in the start and an end of your code which you are going to use for your banner.

<div id="MyBanner">
(your code)
</div>

Step 2:
Go to your Template Designer > Advanced > Add CSS (see below), and add this code:

#MyBanner {margin: 0 auto 0 -60px;}


You might need to adjust the “-60″ value, depending on how large your header is, and how wide your blog is, so just play with the number until it looks right (smaller numbers will move your header to the left, and larger numbers will move your header to the right).

You can adjust your banner and see how it’s looking just below the code when you are changing numbers, Click Apply to Blog when you are happy with your changes :)

Hopefully you found this helpful! :)