How to align your Blogger blog's Header to the center position of your sreen

Flexibility in customizing blog header's position is vital to any blog tools. In case of blogger, it is very easy to align your header to the middle of a web browser's screen.

Step 1: Sign in to your blog
Visit Blogger Blog home page at: or and sign in with your Google account.
Step 2: Go to 'Template Designer' page
A Google account can be used to manage many blogs. When you sign in to your blog, you are presented with the main dashboard. You can click Design link and then 'Template Designer' tab under your chosen blog.

Step 3: Align your blog's header
All you need to do is overriding the 'header-inner' id element in order to align your header to the center of the screen.
  • In your blog's 'Template Designer', click Advanced / Add CSS.

  • Enter the following CSS code to 'Add Custom CSS' tab.

  • Click 'Apply to Blog' button to finish modifying CSS styles of your blog. Now return to your blog's home page you should see your blog's header at the middle of your web browser's screen.
  • You can also align your title by modify the .header-inner .Header .titlewrapper element.
  • Go to Design -> Edit HTML. Click 'Expand Widget Templates'
  • Locate the .header-inner .Header .titlewrapper element. Modify the padding css element.
  • Padding-left is used to move your title to the left, for example

1 comment:

Krishna Patel said...

thank you so much. So far only your code worked :D

Post a Comment

Blog Archive

About Me

My photo
I am a software developer with roughly 5 years of experience in developing end-to-end solutions in C#, Java, C/C++, PHP and HTML/CSS/Javascript. At the moment, I am joining the Professional Doctorate in Engineering degree program in Software Technology at Eindhoven University of Technology. My areas of particular interest include software design, data structures and algorithms, problem solving, software security, embedded system, machine learning, and data science.