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

Post last updated:

15 responses to “How to Correctly Centre Different Items on Blogger”

  1. 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

    1. 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.

  2. 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!

    1. 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.

  3. Lisa Marie

    Thank you soooo much! Man I love you

  4. Mattjoe

    Thanks, it worked but not as perfect as I want it.
    I wanted to center the whole of the side bar widgets entirely and not just their titles alone.

    1. Hi Mattjoe, then use the div or class of the sidebar wrapper instead ๐Ÿ™‚

      1. How exactly please?

        1. By using the div ID or class as the selector, and text-align:center; in the CSS. So it would be #yoursidebarID {text-align:center;} or .yoursidebarclass {text-align:center;}. The specific selector will depend on your blog theme.

  5. Hello…Could you please help me. I am trying to to center Post headers under my links [ dikke toren…spaarpot…..nobelpoort ] but i do not know how. Could you help me ? My blog is http://www.dikketorenshoppie.nl/ thanks for your attention. Greetings from Holland.

    1. Try either method under the heading “Centre Post Date on Blogger” above ๐Ÿ™‚

  6. How do I center “Post page link text” that’s after a page break? On my blog, it reads “โ†  Read Post โ†ž” and it’s after the first image of every blogpost preview. My blog is http://www.arizonagirl.com/.

    Thank you so much for the amazing Blogger posts! I’ve already learned a ton.

  7. Essaund

    Hello,

    I’m just wondering. How can you center a POST to sit at the middle of webpage. That means no side bars either left sidebars or right.

    I can’t find that on the internet. Everyone is giving ideas about centering titles, dates, and widgets but no one has mentioned about centering posts to sit at the middle of the page.

    1. You can remove the sidebar in Layout or hide it using conditional tags. Then use margin:0 auto; to centre post area… ๐Ÿ™‚

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.