How to Center Your Page Tabs in Blogger

Pink Lounge Blogger Template

Here’s a quick tutorial to show you how to center your page tabs in Blogger. This technique only works if you’re using the “Pages” gadget. Please backup your template before making any changes!

1. In your Dashboard click on “Template”

2. Click on “Customize”

3. In the template designer, click on “Advanced” and “Add CSS” and add the following code to the box:

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

It should look like this:

4. Be sure to press enter after you paste the code. Finally click on “Apply to Blog” in the upper right hand corner and you’re done!

You Might Also Like:

Comments

  1. davi says

    Hi Tiffany! You do a beautiful job! I am currently trying to redo my entire blog layout but blogger seems to be down right now. Nothing I am doing on my tabs is being applied. Have you experienced any problems of this sort?

    For example, I am using Simple template and my tabs won’t center like you just advised.

    The font for the tabs is stuck in some default mode. Your tabs have a cute font and look great. Mine look so very generic, no matter what I do.

    Any ideas what I should do?

  2. davi says

    ok, it finally applied the code and was able to center my tabs, yay!

    i think the rest of the problems i am having(font size and type) are issues blogger is having.

    but out of curiosity, are the fonts in the above sample template(Home, About, Daily Reads, Contact) blogger fonts? they don’t look familiar to me on blogger. or did you have to do something special to get them to apply?

  3. Michele says

    This was an easy to follow tutorial except it didn’t work for me. I did everything as you suggested. Hm. I will try it again.

  4. Megan C. Stroup says

    Oh my goodness, thank you SO MUCH! I have been wanting to do this for a while, and this was SO easy. :)

    megancstroup.blogspot.com

  5. Shannon Quigley says

    Thank you! I have been to numerous sites, who all have the same code and i’ve tried with no luck until now. Thank you for telling me to press ENTER! made all the difference!!

  6. Joy says

    THANK YOU! Hitting the “enter” button after pasting code was an important reminder for me. Thanks again for the help.

  7. Kelly says

    When I did this it added each page to a new line. Is it supposed to do that? I want them all on one line just centered on the page. Am I doing something wrong?

  8. Taylor says

    Hi, for my tabs when i click on them like for the link to a different part of my page it doesn’t work like your’s do. What I mean is when I click on one of your tabs it takes me to a different part of your page can you tell me how to do that it would help a lot!

  9. Emma Louise says

    Hi,

    Thanks for the tutorial it worked great!
    How do I do the same for the header description?

    Please email if you know

    Thanks

  10. victoria gates says

    This is seriously amazing. Thank you so very much for sharing!!

    xo, Victoria
    mylifeinverseblog.blogspot.com

  11. Joy says

    Thank you!!! I searched and searched all over Blogger to get this taken care of and in SECONDS I was able to use your tutorial to fix it. Bless you!

  12. Mimosagal says

    thank you so much for this, was super easy to do, awesome instructions. Made my blog that much better. YOU ARE AWESOME!

  13. Molly says

    OMG YOU ARE A LIFE SAVER!!! haha. didn’t know it was gonna be that fast and easy. so glad i came across your blog! :D

  14. Tiffany says

    I centered the entire line of tabs, but how can I center each individual tab? Because it still looks off center because within itself, each tab is still left aligned. Make sense? Please answer!

  15. Ali says

    Thanks so much posting this. Thanks to bloggers like you I can piece together something thats not too much of an eyesore!

  16. says

    This is great. I’d also like to vertically center my tabs text. I was able to increase the height of the tabs, but the text is staying at the top and I would really like to lower it so it isn’t hugging my header image so tightly. Any tips?

  17. says

    hey. for some reason it didnt work for me. is it because i am putting it right after the code to center the header?? can i put multiple code in the Add CCS box??

  18. says

    I know I’m a little late on this but thank you! This was so easy to follow and the fact that my pages weren’t centered has been bothering me for a while. I had no idea it was so easy! Great post :)

  19. says

    Thank the lord that I found your site! I’ve spent ages trying to center my tabs.. your blog made it possible in just a few seconds. Thanks a bunch xx
    newgirl49.blogspot.co.uk

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>