Aligning header image and texts

If you upload your header image via Page Elements, Blogger will automatically align it to the left. There are no options for middle and right alignment. So then, it possible to align the image in at the center or to the right of the header?

Yes it is possible -using CSS (Cascading style sheet). But to define an element in CSS you must know the element id or class name. After some checking I found the id for header widget contents to be header-inner. So what’s next?

You need to check the image placement method you used when uploading the header image to Blogger. Different method handles the image differently, thereby requiring different code for alignment.

Once header image placement is known, it’s time to add in the code.

1. Go to Dashboard > Layout > Edit HTML.
2. Look for ]]></b:skin> line in your HTML code and add the following codes right before it:

1. If you used “Behind title and description” option

Your image is posted as a background by Blogger, to align it you need to reposition the background image. This code will not move the header title and description. For header title and description, see Aligning header texts.

• To center:

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

• To align right:

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

2. If you used “Instead of title and description” option

The image is posted using an <img> tag.

• To center:

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

• To align right:

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

  You need to adjust the left margin (300px in this example) to “push” the image to the right.

For option 1 and 2 to work, your header image width (plus margin and padding if any) must be equal or less than the container (such as header-wrapper, outer-wrapper etc.) width.

 

Aligning header texts

Use the codes below for aligning header title and description. The codes are applicable to both text-only header and the text in “Behind title and description” image placement option.

• To center:

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

• To align right:

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

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.