How To Center Blogger Elements

Centering Blogger Elements

Blogger isn't that hard to use. 

But there are times I want to give up on it.  Like when a simple tasks turns into an all day adventure.  Titles don't line up and images are squashed. Page breaks are shoot and miss. And don't get me started on the SEO issues. IMHO it's harder than it has to be. I think this because I've developed in other platforms. WordPress, Drupal, Stripe, and even Joomla are easier to use.  But when it comes to management, Blogger beats them hands down.  And if you want to just login and post, Blogger does that. You just can't do the usual point and click stuff.   So let's simplify a few of them on a sitewide level.

A Simple List To Center Blogger Elements 


Just follow these steps and your elements will be centered.

  • Log in to your Blogger blog
  • Go to Template > Customize > Advanced > 
  • Add CSS code to center your header image: 
    • #header-inner img {margin: 0 auto;} 
  • Use this code to center your header’s title and description (text): 
    • #header-inner {text-align: center;} 
  • Use this code to center your post titles:
    • .post-title {text-align:center;} 
  • Use this code to center your post dates: 
    • .date-header {text-align:center;} 
  • Use this code to center your gadget titles:
    • .section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2 {text-align: center;} 
  • Use this code to center your sidebars: 
    • .main-inner .column-left-inner, .main-inner .column-right-inner {text-align: center;} 
  • Use this code to center your tabs (menu): 
    • .PageList {text-align:center !important;} .PageList li {display:inline !important; float:none !important;} 

Don’t forget to click Apply To Blog. And, you’re done!

Comments

Some Of My More Popular Post