How to Correctly Centre Different Items on Blogger

Want to know how to centre your header image, blog post images, sidebar images, gadgets, text, headings and everything else on Blogger? I’ve created a reference list below for you explaining how to correctly center the different elements on Blogger, without needing to use deprecated methods.

This post was previously part of a post titled “How to Properly Centre Items in HTML The Right Way – Avoiding Non-Supported Methods” published June 2014 as part of the Basics of HTML for Beginners and Bloggers Series. In an effort to organise posts, I’ve decided to republish it separately.

What Are Deprecated Methods?

These are methods that are no longer supported or comply with standards, they may still work on some web browsers but the result is not guaranteed. Are you using <center> </center> and <div align="center" > </div> to centre items? These have been deprecated for quite some time. You can read more about it in How to Correctly Center Items in HTML using CSS.

Correctly Center elements on Blogger

Here are a list of ways to center the different elements on your Blogger blog. Note, this may vary depending on the code your template uses. Double check the class or id, and replace the selector below with the correct one for your template.

Centre Header Image/Logo on Blogger

Add the following code above </b:skin> to Template > Edit HTML

#header-inner img {width: 900px; margin: 0 auto;} 
#header-inner {text-align: center;}

Full tutorial here

Centre Post Title on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

h3.post-title, .post-title { text-align: center; }

Centre Post Date on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.date-header {text-align:center;}

Centre Navigation Menu Items/Tabs on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.tabs-inner .widget ul { text-align: center;} 
.tabs .widget li, .tabs .widget li {display: inline-block; float: none;} 

Full tutorial and more styling code in this basic navigation tutorial.

Centre Page List Items/Tabs on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.PageList {text-align:center !important;} 
.PageList li {display:inline !important; float:none !important;}

Centre Sidebar Gadget/Widget Titles on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.sidebar .widget h2, .title {text-align:center;} 

Centre Blog Post Images on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.post-body img {margin: 0 auto; text-align: center; }

Centre The Archive Widget/Gadget List on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

#ArchiveList, 
#ArchiveList ul {text-align:center;}

Centre Sidebar Items and Gadgets on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

#sidebar-right-1, 
#sidebar-left-1 {text-align:center;}

Centre Heading Tags in Posts on Blogger

Add the following code above </b:skin> to Template > Edit HTML.

.post-body h2, 
.post-body h3, 
.post-body h4, 
.post-body h5, 
.post-body h6 {text-align:center;}

5 comments

  1. iteacertified on

    Hello, thanks for the tutorial …I applied the code to CENTRE NAVIGATION MENU ITEMS/TABS ON BLOGGER but still no changes. My navigation menu bars are still not at the centre…….Is the code ment to be applied in edit template html or CSS

    Reply
    • Elaine Malone on

      Hello. You’re using a custom menu from another blogger/developer so you’ll have to use the Class or ID from it instead of what I’ve shown here for the default Blogger navigation. You also have some CSS within another declaration in your CSS section which is causing errors so double check your closing brackets.

      The CSS should go in the CSS section of your template, this is between <b:skin> and ]]><b:skin> in Template > Edit HTML. Any CSS you put in Template > Customise > Advanced > Add CSS, will also go in this section but it’s easier to cause errors using that method.

      Reply
  2. Haylie Dittrich on

    Hey! I love your blog and normally I follow really easily but I can’t find a tutorial on one specific thing I need. I want to centre a single page’s posts, so that when viewers go to that page it is all centred in the middle of the screen and the images enlarge to almost fit the screen. Is this even possible? I really need some help!

    Reply
    • Elaine Malone on

      Hello Haylie, thank you so much. It is possible, you can use the conditional statements (information here) to target only that page and then centre that text (information here). However, keep in mind that centred body text is not recommended as it’s more difficult to read that left-aligned text.

      Reply

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.