need to align list items to center of div

Question

I want to align a list of links to be centered within a div.

I tried margin: 0 auto, but no luck.

Note: the navigation-wrapper div needs to stay in place, this is just the snippet of html that is of concern.

Check http://jsfiddle.net/bkmorse/aaCY7/ to see the links that I need to align properly in the div.

html

<div id="navigation-wrapper">
  <ul id="top-navigation">
    <li><a href="">Home</a></li>
    <li><a href="">Volunteer</a></li>
    <li><a href="">Support</a></li>
    <li><a href="">Educate</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">Gift Shop</a></li>
    <li><a href="">Directions</a></li>
  </ul>
</div>

css

#navigation-wrapper {
 width:465px;
 border:1px solid red;
}

#top-navigation {
 margin: 0 auto;
 border:1px solid blue;
 padding:5px 0;
}

#top-navigation li {
 display:inline;
 list-style-type:none;
 margin:2;
}​

Walkyrie

margin: 0 auto; will work if you define a fixed width. – Germinate

Answer 1

Change your CSS to this. That works out.

#navigation-wrapper {
 width:465px;
 border:1px solid red;
 margin:0 auto;
 text-align:center;
}

#top-navigation {
 border:1px solid blue;
 padding:5px 0;
}

#top-navigation li {
 display:inline;
 list-style-type:none;
 margin:2;
}

Ressler

Answer 2

Margin:auto work with define width.Write like this:

#navigation-wrapper {
 width:465px;
 margin: 0 auto;
 border:1px solid red;
    text-align:center;
}

#top-navigation {
 display:inline-block;
 border:1px solid blue;
 padding:5px 0;
}

check this http://jsfiddle.net/aaCY7/1/

Eulogistic

inline-block gives problems with IE compability, that you only can solve with ugly hacks. This can be solved easily without inline-block and problems. – Ressler

Answer 3

Since your top-navigation ul doesnt have a set width it is actually centered. However the li's within it are not. If you want to see those items centered then

#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
text-align: center;
}

If you want that list centered in the div but still left align the things inside use this

#top-navigation {
margin: 0 auto;
border:1px solid blue;
padding:5px 0;
width: 300px;
}

or do both if some combination of the two is needed.

Carpentry

Answer 4

i just need to know the display inline for the li items that woked for me. In case of center align we can add tex-align: center in the main div. In the above case #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } This should worked

Lorenza