necesidad de alinear los elementos de la lista al centro de div

Quiero alinear una lista de enlaces para centrar dentro de un div.necesidad de alinear los elementos de la lista al centro de div

Probé margen: 0 automático, pero no tuve suerte.

Nota: el divisor de envoltura de navegación debe mantenerse en su lugar, este es solo el fragmento de html que es motivo de preocupación.

Compruebe http://jsfiddle.net/bkmorse/aaCY7/ para ver los enlaces que necesito alinear correctamente en el 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; 
}

Fuente

2012-03-26 Brad

margin: 0 auto; funcionará si defines un ancho fijo. –

Cambia tu CSS a esto. Eso funciona.

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

Fuente

2012-03-26 18:52:03

Margin:auto trabajo con definir width .Write así:

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

cheque esta http://jsfiddle.net/aaCY7/1/

Fuente

2012-03-26 18:51:08 sandeep

inline-block le da problemas con la compatibilidad IE, que solo puede resolver con hacks feos. Esto se puede resolver fácilmente sin bloqueos ni problemas en línea. –

Dado que su navegación superior ul no tiene un ancho establecido, en realidad está centrada. Sin embargo, los li's dentro de él no lo son. Si quieres ver los artículos centrados entonces

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

Si desea que la lista centrada en el div, pero todavía queda alinear las cosas dentro de utilización de este

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

o ambas cosas si alguna combinación de los dos es necesario.

Fuente

2012-03-26 19:00:22

solo necesito saber la pantalla en línea para los elementos que me gustaron. En el caso de la alineación central, podemos agregar tex-align: center en la div principal. En el caso anterior #top-navigation { margin: 0 auto; border:1px solid blue; padding:5px 0; text-align: center; } Esto debería funcionar

Fuente

2013-08-13 15:29:07

necesidad de alinear los elementos de la lista al centro de div

Respuesta

Cuestiones relacionadas