How to Center Your Page Tabs in Blogger

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!

Subscribe to our newsletter for freebies (including Genesis child themes), monthly inspiration, and more!

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. davi says

    Thanks so much! I’ll look for a tutorial on that! Unless you know of good one;) Your tutorials are very easy to follow.

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

  5. Michele says

    Oh yes it worked now! I just pasted each line separately and made sure to press enter after each. How cool! :)

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

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

  8. Nancy says

    Thanks so much!!!! I tried a couple of other codes from others with no luck. This one worked perfectly!!!!

  9. Joy says

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

  10. Emily says

    Hi Tiffany,

    For some reason this is not working for me. Any advice as to what I might be doing wrong?

    Thanks!

  11. 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?

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

  13. Meghan says

    Hey thanks! Super easy tutorial :) nerky.blogspot.com. You can take credit for my SWEET centered tabs.

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

  15. victoria gates says

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

    xo, Victoria
    mylifeinverseblog.blogspot.com

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

  17. Mimosagal says

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

  18. Taamra says

    Thank you SO much for this, been trying to figure it out and it worked in 2 mins!!

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

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

  21. Ali says

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

  22. 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?

  23. 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??

  24. says

    For some reason this didn’t work for me. Is it because I have a Simple Template or because I already have codes in CSS box? X

  25. 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 :)

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

  27. says

    Thank you so much this was definitely helpful for creating and personalising my blog : innervi.blogspot.com.au

    Thanks again!

  28. Nidia Amalia says

    Found this when searching on Google. Thank you very much. Your tutorial is very easy and simple for beginners!

  29. M C Dobbs says

    Your tutorials have been very helpful, but this one just doesn’t work! Read all comments for clues and haven’t been able to get it to work!

  30. says

    YES .. A million thank you!!!!!!!! This made my day.. The last touch to my blog!!
    I wonder how it would be without people like you! THANK YOU <3