How To Center Your Header And Header Text In Blogger

Editing Your Blogger Header And Title/Description  Text

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:

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

To A#header-inner img {margin: 0 auto 0 300px;}lign Right:

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

All done and 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:

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

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.