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;}

or

.post-title.entry-title {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;}