How to Center Blogger Header Image/Banner

Centralizing your blogger header is the most important thing you need to do, immediately you uploaded your desired created/designed Logo/Image for your blog. Maybe you use a custom header image, such as your company logo, Blogspot snaps it to the side of the page, unbalancing your blog's design. By default, Blogspot aligns the header in your blog to the left.

To centralize your blogger header Image/Logo/Banner all you need to do is to modify the CSS of your blog which can be found directly through your Blogger dashboard.

Read How to Upload Image/Banner to Blog Header in Blogger

Follow these simple steps to centralize your blogger header

Step 1: Login to your blog's dashboard, click "Layout" in the page's sidebar, click "Template" and click the "Customize" button.

Step 2: Click "Advanced" in the designer's first column, then click "Add CSS," which is the last link in the second column and paste the code below in the empty box:

#header-inner {

background-position: center !important;

width: 100% !important;

text-align: center;

}

#header-inner img {

margin: auto;

}

Note: If you have a small image and you want it to become full width, add this CSS instead:

#header-inner {

background-size: cover;

width: 100% !important;

text-align: center;

}

#header-inner img {

width: 100%;

height: 100%;

}

Step 3: After you paste the code, click the "Apply to Blog" button.

Final Step:

After applying/saving the code to your blog, navigate back to your blog homepage. Refresh your blog homepage and you'll notice that the header is now centered, instead of left by default.

Note: Make sure that you copy and paste the information into the file exactly as instructed above because minor modifications in the code may fail to make the changes you are trying to achieve.

That all....

Learn more interesting Blogger Tips.

Kindly share this post with your friends and tell your friends to share it with their friends.