How to Center the Blogger Header Image

Hello and Welcome to GetWebInfo and welcome. Here about this post, I'll let you know how Blogger headers can center. It's really easy and easy way to do this. The header of a website is that your blog has printed it or digital fingerprint. Whenever a visitor has accessed your blog for the first time. The header is a big aspect, which is used to determine which you are and the nature of the content that they can expect to read. So a header is required to instantly put and name your brand name.




Put Center the Blogger Header Image in to Blogger Designer

Keep a picture header with the Blogger template designer. The change is relatively easy, you'll be able to change these adjustments individually on every page of your Blogger Blog. You need to edit your blog's CSS that can be found directly through your Blogger Dashboard. Even if you have no experience in web design or coding. You can solve this problem with some easy steps.

Step: 01: Log in to your Blogger account and select your blog, then go to Template and click on the Custom button on the right side of Blogger.



Step 02: Navigate to Advanced and Add CSS tab and Paste the Code in the Empty box.

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

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 03: Hit the Enter key after you paste the code snippet, then click the Apply Button,




Align Blogger Header Banner and Text Side by Side 

Here are some other aligning option for your headers

Image on the right and title on the left side

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}

Here is another one 

Image on the left and Title on the right 

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}

 At the End Save your Template and you can all don.

After making the changes to the CSS and saving your modifications. You may navigate back to your homepage. Research the page and you'll notice that the header is now centered. Instead of on the left. Click of few of yourself.

.