Aligning Header in a Blogger.

By default if you upload the header in a Blogger it will be automatically aligned to left.But what if we wish to align center or right part.The solution is by using CSS(Cascading Style Sheet).

For applying CSS we need to  know the element unique ID name or common class name.This is the reason often There will be no action although there is CSS in Template.If you are using Blogger Designer or Simple 3rd part Template then “header-inner” is the ID.

For Aligning Header you need to Know which method you used for uploading.For example you might have used “Behind Title and Description” or “Instead of Title and Description”

To add CSS you can learn from here.

Using  “Behind title and description” Method.

If you have used this method then your image will be behind of your header and title.Simply your image is used as background in Header.

• To Center Align(CSS Code)

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

• To Right Align(CSS Code)

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

  You might have notice that to align we have used Background-position as css.

Using  “Have description placed after the image”

If you have used this method then only image will be seen.

• To Center

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

  If you are using Template designer then add this more lines

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

• To Right Align

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

  Change 400 for adjusting left margin.
• To Align Vertically

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

  Change 30px to the size where you can feel satisfied.

Aligning Header Title and Description.

If you have align Image only then we need to align Header Title and Description too.This is effective if you have used “Behind title and description” method in setting header.

• To Center

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

• To Right Align

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

• To Align Vertically

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

  In option 1 and 2 you can see we have used text align for aligning center or right.

Aligning Header and Image Separately.

• Image on left and Text on Side

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

• Image on right and text on left.(Changing from left to right and right to left of option 1)

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

If you want to make attractive header like mine then the tutorial is here.

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.