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 thoughts on “CSS – Center Unordered List UL/LI Based Menu”

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

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

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

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

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

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

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

Comments are closed.