necessario allineare gli elementi di elenco al centro di div

Question

Desidero allineare un elenco di collegamenti da centrare all'interno di un div.

Ho provato margine: 0 auto, ma senza fortuna.

Nota: il div del wrapper di navigazione deve rimanere in posizione, questo è solo il frammento di codice HTML che interessa.

Controllare http://jsfiddle.net/bkmorse/aaCY7/ per vedere i collegamenti che ho bisogno di allineare correttamente nel 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; 
}​ 

Answer 1

Cambia il tuo CSS in questo. Funziona.

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

Answer 2

Margin:auto lavoro con definire width Scriva così:

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

controllo questo http://jsfiddle.net/aaCY7/1/

Answer 3

Poiché il vostro sistema di navigazione dall'alto non ha una larghezza impostata, è effettivamente centrato. Tuttavia il li è dentro non lo sono. Se si desidera visualizzare gli elementi centrati quindi

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

Se si desidera che la lista centrato nel div, ma ancora a sinistra allineare le cose dentro uso questo

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

o fare entrambe le cose, se una combinazione dei due è necessario.

Answer 4

ho solo bisogno di conoscere il display in linea per gli elementi li che mi hanno svegliato. In caso di allineamento del centro possiamo aggiungere tex-align: center nel div principale. Nel caso precedente #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } Questo dovrebbe funzionare