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!


If you would like help with your websites SEO, Website Design, Ecommerce Conversion or Email Marketing then please give me a call on 07719181166 or email mark@blueclaw.co.uk.

10 comments ↓

#1 evsap on 02.22.10 at 2:23 pm

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

Well-loved. Like or Dislike: Thumb up 10 Thumb down 3

#2 mary on 03.29.10 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)?

Well-loved. Like or Dislike: Thumb up 6 Thumb down 0

#3 Mark Rushworth on 03.29.10 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.

Well-loved. Like or Dislike: Thumb up 4 Thumb down 0

#4 Juan on 04.21.10 at 8:38 pm

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

Like or Dislike: Thumb up 2 Thumb down 0

#5 Rahul Bansal on 05.17.10 at 10:17 am

Hi Mark,

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

-Rahul

Like or Dislike: Thumb up 1 Thumb down 0

#6 Daniel on 05.19.10 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 :)

Like or Dislike: Thumb up 1 Thumb down 0

#7 Mark Rushworth on 05.24.10 at 9:35 am

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

Like or Dislike: Thumb up 1 Thumb down 0

#8 Brian H. on 06.26.10 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;
}

Like or Dislike: Thumb up 0 Thumb down 0

#9 Luis C. on 07.12.10 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.

Like or Dislike: Thumb up 0 Thumb down 0

#10 Orlando on 08.30.10 at 10:09 pm

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

Like or Dislike: Thumb up 0 Thumb down 0

Leave a Comment (DON'T SPAM ME)