CSS – Center Unordered List UL/LI Based Menu

Call me stupid, but i’ve always been told that you can’t center the contents of an unordered list as used in the footer menu for many websites (maybe that goes to show that many people don’t know what they’re on about?) the solution just popped into my head – try it for your self!

styles:

#footer{text-align:center;list-style:none}
#footer li{display:inline}

HTML

<ul id=”footer”>
<li><a href=”1.asp”>Link 1</a></li>
<li><a href=”2n.asp”>Link 2</a></li>
<li><a href=”3.asp”>Link 3</a></li>
</ul>

Simple stuff indeed!

38 Comments

      • Jonathan Sabo   •  

        It works without it, but the default padding left of UL makes it not truly centered.

  1. Michael Berlin   •  

    Thank you, I was stuck with that simple little thingy for 30 minutes now…

  2. Tom   •  

    Great Job Mark, I’ve been trying to figure this out for days!

  3. Chris   •  

    Thanks for the tip, I see this isn’t a new article, but is still serving the public. Cheers!

  4. vishu   •  

    thanks a lot

  5. Dwayne   •  

    Just what I needed. Thanks for posting!

  6. ahmad balavipour   •  

    Thanks alot,

    before this i am using li{ float:right;} for foot menu, thanks for solution

  7. cyberprodigy   •  

    .myUL {
    display:block;
    text-align:center;
    }
    .myUL li {
    display:inline-block;
    }

    • meron   •  

      Perfect! many thanks for all the info on the page. This code was my solution on my site. Love it.

  8. Bas   •  

    and if you want the align the ul to the bottom of the surrounding div?

  9. Sam Orchard   •  

    You can do almost anything with CSS, including over-writing an element’s default styling properties. A worthwhile lesson though – a lot of people don’t know what they’re on about :P

  10. Chris   •  

    Hey. Thought to myself this must be way simpler than the current solution I have. Thanks.

  11. Naji   •  

    But how about if it was a vertical list and I want to horizontally center each list item within the ul?
    I tried {margin: 0 auto} but as was stated on CSS-tricks, that won’t work. And, I couldn’t really use his solution since he’s doing a horizontal list. Any advice? Thanks.

  12. Connor   •  

    I spent about 30 mins trying to figure this out with loads of unnecessary code before I decided to Google and found this. Thank you so much, so simple and so elegant.

  13. Brad   •  

    Man, I wish I had found this post earlier. Wasted close to an hour messing with margins. Thanks for posting the tip.

  14. Ryan   •  

    Thanks.
    This problem was too simple, so I was looking for an overly complex solution.

  15. David Selkirk   •  

    Thanks! I was messing with this for quite a long time on a few different projects. I don’t know why I never searched for a solution. great work.

  16. Kenny   •  

    Thanks, that works like a charm.

  17. Dave Sellers   •  

    Superb, just what I was looking for. Nicely done!

  18. Dina Barbosa   •  

    You are a saint! Just saved my day :)
    Thank You!

  19. Andy Bramwell   •  

    @brian H

    set your width to 100% and your button will be at the left hand side

    Andy :D

  20. scorpy   •  

    simple though, but just what i needed! thanks!

  21. Razu Kc   •  

    AWESOME!

    Thank you so much!

    I was trying differently and the solution was so simple.

  22. Orlando   •  

    thanks a lot =) simple solution for an annoying problem..

  23. Luis C.   •  

    Hi Brian,

    Nice article, it helped me out today :)

    Try to add text-align: left to the footer-item class. it might look almost like you want.

  24. Brian H.   •  

    I’m trying to do the opposite, I don’t want my list centered. I have it on my footer at http://anytimeteas.com

    Here’s my css (warning, I don’t really know what I’m doing). I’d like the lists flush to the left and the headers to each column in the same location, preferably on the left side, directly above each list.

    .footer-item {
    float: left;
    width: 33%;
    padding-bottom: 10px;
    }
    .footer-item ul {
    padding-left: 15px;
    }

  25. Daniel   •  

    Thanks, very helpful! I wasn’t sure it could be centered that easily, I’m glad I googled it before creating nested divs and other gnarly stuff like that :)

    • Mark Rushworth   •     Author

      Hi Daniel, thanks i try to come up with elegant solutions that use minimal markup :)

  26. Rahul Bansal   •  

    Hi Mark,

    It worked like charm! :-)
    Thanks for saving my day

    -Rahul

  27. Juan   •  

    I was looking so much for the solution… very simple and works perfect!
    Congrats, thanx!

  28. mary   •  

    how would you center the unordered list if the lis were set to display: block (in case i want to have backgrounds on them or set a height)?

    • Mark Rushworth   •     Author

      Hi Mary, try display:inline-block where you can set the width and height (not in ie6 tho i think) or you could nest the li making the first li 100% wide.

  29. evsap   •  

    Thank you. I was just wondering the same thing and was looking for the solution.

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>