How to Position a Blogger Site Header

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;}

But of course there are other options you can select for the header in blogger, namely:

1) INSTEAD OF TITLE AND DESCRIPTION
2) BEHIND TITLE AND DESCRIPTION


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:

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

To Align Right:

#header-inner img {margin: 0 auto 0 300px;}

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

To Align Vertically:

#header-inner img {padding-top: 50px ;}

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:

#header-inner {background-position: center !important; width: 100% !important;}

To Align Right:

#header-inner {background-position: right !important; width: 100% !important;}

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:

#header-inner {text-align: center ;}

To Align Right:

#header-inner {text-align: right ;}

To Align Vertically:(apply top padding)

.titlewrapper {padding-top: 50px  !important;}

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:

#header-inner {background-position: left !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}

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

To Place Text on Left & Image on Right:

#header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}

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