SEO Blog

10 years ago

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!

Mark Rushworth

With over 14 years experience in online design and marketing I, like many others, began my professional life as a web designer before realising my talent for digital marketing.This I have pursued as my primary career focus since 2007. Since then Ive worked across all sectors for clients big and small delivering the best bang for your buck.
Mark Rushworth Administrator

With over 14 years experience in online design and marketing I, like many others, began my professional life as a web designer before realising my talent for digital marketing. This I have pursued as my primary career focus since 2007. Since then Ive worked across all sectors for clients big and small delivering the best bang for your buck.

38 comments

  • Jonathan Sabo Posted on June 19, 2012 at 2:31 pm

    You need to add

    #footer {padding-left:0;}

    • Mark Rushworth Posted on June 20, 2012 at 10:49 am

      Should work without it!

      • Jonathan Sabo Posted on June 20, 2012 at 3:35 pm

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

  • Michael Berlin Posted on April 10, 2012 at 1:58 pm

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

  • Tom Posted on March 6, 2012 at 11:19 pm

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

  • Chris Posted on December 3, 2011 at 6:37 pm

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

  • vishu Posted on November 21, 2011 at 12:20 pm

    thanks a lot

  • Dwayne Posted on October 18, 2011 at 2:40 pm

    Just what I needed. Thanks for posting!

  • ahmad balavipour Posted on August 13, 2011 at 5:09 am

    Thanks alot,

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

  • cyberprodigy Posted on July 30, 2011 at 6:13 pm

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

    • meron Posted on September 6, 2011 at 9:47 pm

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

  • Bas Posted on July 14, 2011 at 11:14 am

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

  • Sam Orchard Posted on May 21, 2011 at 4:15 pm

    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

  • Chris Posted on April 23, 2011 at 9:00 pm

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

  • Naji Posted on April 4, 2011 at 3:23 pm

    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.

    • Mark Rushworth Posted on April 6, 2011 at 6:06 am

      text-align:center in the li… simple

  • Connor Posted on March 25, 2011 at 4:05 pm

    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.

  • Andy Townsend Posted on March 22, 2011 at 4:42 am

    Thanks Mark. A simple solution and just what I needed.

  • Brad Posted on March 12, 2011 at 11:46 pm

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

  • Ryan Posted on February 26, 2011 at 7:11 pm

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

  • David Selkirk Posted on February 11, 2011 at 10:04 pm

    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.

  • Kenny Posted on December 5, 2010 at 10:19 am

    Thanks, that works like a charm.

  • Dave Sellers Posted on November 19, 2010 at 4:38 pm

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

  • Dina Barbosa Posted on October 19, 2010 at 2:04 am

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

  • Andy Bramwell Posted on September 28, 2010 at 10:41 pm

    @brian H

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

    Andy :D

  • scorpy Posted on September 18, 2010 at 12:33 pm

    simple though, but just what i needed! thanks!

  • Razu Kc Posted on September 10, 2010 at 9:17 pm

    AWESOME!

    Thank you so much!

    I was trying differently and the solution was so simple.

  • Orlando Posted on August 30, 2010 at 10:09 pm

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

  • Luis C. Posted on July 12, 2010 at 7:03 pm

    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.

  • Brian H. Posted on June 26, 2010 at 6:32 am

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

  • Daniel Posted on May 19, 2010 at 10:03 pm

    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 Posted on May 24, 2010 at 9:35 am

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

  • Rahul Bansal Posted on May 17, 2010 at 10:17 am

    Hi Mark,

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

    -Rahul

  • Juan Posted on April 21, 2010 at 8:38 pm

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

  • mary Posted on March 29, 2010 at 6:14 pm

    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 Posted on March 29, 2010 at 7:59 pm

      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.

  • evsap Posted on February 22, 2010 at 2:23 pm

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

Comments are closed.