Home » , , » How To Center Your Blogger Header Text Or Picture

How To Center Your Blogger Header Text Or Picture

Written By Soumyodeep Mondal on Tuesday, May 20, 2014 | 7:09 PM

Sometimes you will see that your blog name text or picture is in your blogger left position and you want to center it or you have a center header that you want side it in left in your blogger header, so this tutorial will help you about changing the position of your blogger header.



Method

1. Login in to you Blogger account.

2. Go to Dashboard.

3. Then go to Template => Customize.

4. When you will click on Customize option wait for 2-3 seconds and you will see a menu called "Blogger Template Designer".

5. There you will see "Advanced" menu click on this option.

6. After that navigate to "Add CSS" option.

7. Here add your CSS code and click on "Apply to Blog" option.


Code for move your header to desired position

For Header Image

A. If you will use "Instead Of Title And Description" option:
To align center your header image:
#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}

To align right your header image:
#header-inner img {margin: 0 auto 0 300px;}

To align vertically your header image:
#header-inner img {padding-top: 50px ;}


B. If you will use "Behind Title And Description" option:
To align center your header: 
#header-inner {background-position: center !important; width: 100% !important;}

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

For Header Text

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

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

To align vertically your header text:
.titlewrapper {padding-top: 50px !important;}



After adding the proper CSS code click on "Apply to Blog".


Notice: All the content and material of this website are strictly copyright to this website's administrator please do not copy our material to your websites or your blogs without the  administrator permission.

This tutorial is made for better understanding your tutorial and for blogging and other purposes, if you have a any doubt on this tutorial feel free to contact with us. Thanks.

Enjoy the tutorial and have a nice day.

0 comments:

Post a Comment

Contact Us

Name

Email *

Message *