css - tag - ul styling
Centro<ul><li> en div (16)
Amo flexbox:
ul {
justify-content: center;
display: flex;
}
Después de algunas búsquedas, no encontré una forma adecuada de centrar una lista de <li> en un div ancho fijo.
Echa un vistazo a la página ... ¡Tampoco funciona!
Aquí está la solución que pude encontrar:
#wrapper {
float:right;
position:relative;
left:-50%;
text-align:left;
}
#wrapper ul {
list-style:none;
position:relative;
left:50%;
}
#wrapper li{
float:left;
position:relative;
}
Como se display: block elementos ul y li display: block de forma predeterminada; proporcióneles márgenes automáticos y un ancho menor que su contenedor .
ul {
width: 70%;
margin: auto;
}
Si ha cambiado su propiedad de visualización, o ha hecho algo que anula las reglas de alineación normales (como la flotación), esto no funcionará.
Esta es una mejor manera de centrar UL dentro de cualquier contenedor DIV.
Esta solución CSS no usa las propiedades Ancho y Flotante. Flotante: Izquierda y Ancho: 70%, le causará dolores de cabeza cuando necesite duplicar su menú en diferentes páginas con diferentes elementos de menú.
En lugar de usar ancho, usamos relleno y margen para determinar el espacio alrededor del elemento de texto / menú. Además, en lugar de usar Float: Left en el elemento LI, use display: inline-block.
Al dejar flotando tu LI, literalmente flotas tu contenido hacia la izquierda y luego debes utilizar uno de los Hacks mencionados anteriormente para centrar tu UL. Pantalla: Inline-Block crea su propiedad Float para usted (más o menos). Toma su elemento LI y lo convierte en un elemento de bloque que se encuentra uno al lado del otro (no flotando).
Con el diseño receptivo y el uso de marcos como Bootstrap o Foundation, habrá problemas al tratar de flotar y centrar el contenido. Tienen algunas clases integradas, pero siempre es mejor hacerlo desde cero. Esta solución es mucho mejor para menús dinámicos (como el sistema de menú de Adobe Business Catalyst).
La referencia para este tutorial se puede encontrar en: http://html-tuts.com/center-div-image-table-ul-inside-div/
HTML
<div class="container">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>
CSS
.container {
text-align: center;
border: 1px solid green;
}
.container ul {
border: 2px solid red;
display: inline-block;
margin: 10px 0;
padding: 2px;
}
.container li {
display: inline-block;
}
.container li a {
display: inline-block;
background: #444;
color: #FFF;
padding: 5px;
text-decoration: none;
}
He estado buscando el mismo caso e intenté todas las respuestas cambiando el ancho de <li> .
Lamentablemente, no se pudo obtener la misma distancia a la izquierda y a la derecha del cuadro <ul> .
La coincidencia más cercana es esta respuesta, pero necesita ajustar el cambio de ancho con relleno
.container ul {
...
padding: 10px 25px;
}
.container li {
...
width: 100px;
}
Vea el resultado a continuación, toda la distancia entre <li> también a la casilla <ul> es la misma.
Interesante, pero prueba esto con los elementos li flotantes dentro de la ul: Ejemplo aquí
El problema ahora es que el ul necesita un ancho fijo para sentarse en el centro. Sin embargo, queremos que sea relativo al ancho del contenedor (o dinámico), margin: 0 auto on the ul no funciona.
Una mejor manera es dejar de lado la lista UL / Li y utilizar un ejemplo de aproximación diferente aquí
Otra opción es:
HTML
<nav>
<ul class = "main-nav">
<li> Productos </li>
<li> Catalogo </li>
<li> Contact </li>
<li> Us </li>
</ul>
</nav>
CSS:
nav {
text-align: center;
}
nav .main-nav li {
float: left;
width: 20%;
margin-right: 5%;
font-size: 36px;
text-align: center;
}
Para centrar el ul y también tener los elementos li centrados en él también , y hacer que el ancho del ul cambie dinámicamente, use display: inline-block; y envuélvalo en un div centrado.
<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>
<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>
Actualizar
Aquí hay un enlace jsFiddle al código de arriba.
Para centrar un objeto de bloque (p. Ej., El ul ) debes establecer un ancho sobre él y luego puedes establecer los márgenes izquierdo y derecho de los objetos en automático.
Para centrar el contenido en línea del objeto de bloque (por ejemplo, el contenido en línea de li ), puede establecer la propiedad css text-align: center; .
Pasos:
- Escribir
style="text-align:center;"para padresdivdeul - Escribir
style="display:inline-table;"aul - Escribir
style="display:inline;"parali
o usar
<div class="menu">
<ul>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</div>
<style>
.menu { text-align: center; }
.menu ul { display:inline-table; }
.menu li { display:inline; }
</style>
Podría ser
div ul
{
width: [INSERT FIXED WIDTH]
margin: 0 auto;
}
o
div li
{
text-align: center;
}
depende de cómo debería verse (o combinarlos)
Si conoce el ancho de la ul , simplemente puede establecer el margen de la ul en 0 auto;
Esto alineará el ul en el medio del div que contiene
Ejemplo:
HTML:
<div id="container">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<div>
CSS:
#container ul{
width:300px;
margin:0 auto;
}
Solo agrega text-align: center; a tu <ul> . Problema resuelto.
Tratar
div#divID ul {margin:0 auto;}
utilizar old-school center-tags
<div> <center> <ul> <li>...</li> </ul></center> </div>
:-)
<div id="container">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</td>
</tr>
</table>
</div>