How to center your Blog header!!

Hello everyone! 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.


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

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:
  #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

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! =)