html - attribute - ¿Cómo centrar una lista desordenada?
html title attribute style (4)
Necesito centrar una lista desordenada de ancho desconocido, mientras mantengo alineados los elementos de la lista.
Consigue el mismo resultado que este:
HTML
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
div { text-align: center; }
ul { display: inline-block; text-align: left; }
Excepto mi <ul> no tiene un div padre. ul { margin: 0 auto; } ul { margin: 0 auto; } no funciona porque no tengo un ancho fijo. ul { text-align: center; } ul { text-align: center; } no funciona porque los elementos de la lista ya no quedarán alineados. Entonces, ¿cómo puedo centrar este <ul> mientras mantengo la <li> izquierda alineada (sin tener una envoltura div primaria)?
<ul>
<li></li>
<li></li>
<li></li>
</ul>
EDITAR : Quizás mi redacción no fue la mejor ... El primer bloque de código ya funciona ... lo que necesito es hacerlo sin el envoltorio <div> , si es posible, por supuesto. ¿Trucos de flotar? ¿Pseudo elementos trucos? Debe haber una forma.
Para alinear en el centro una lista desordenada, debe usar la propiedad de alineación de texto CSS. Además de esto, también debe colocar la lista desordenada dentro del elemento div.
Ahora, agregue el estilo a la clase div y use la propiedad text-align con center como su valor.
Vea el siguiente ejemplo.
<style>
.myDivElement{
text-align:center;
}
.myDivElement ul li{
display:inline;
}
</style>
<div class="myDivElement">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Aquí está el sitio web de referencia Centro Alinear lista desordenada
Si es posible que usted use sus propias listas de balas
Prueba esto:
<html>
<head>
<style type="text/css">
ul {
margin:0;
padding:0;
text-align: center;
list-style:none;
}
ul li {
padding: 2px 5px;
}
ul li:before {
content:url(http://www.un.org/en/oaj/unjs/efiling/added/images/bullet-list-icon-blue.jpg);;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Por tu mensaje, entiendo que no puedes configurar el ancho de tu archivo.
así que wt acerca de esto?
<ul>
<li>Hello</li>
<li>Hezkdhkfskdhfkllo</li>
<li>Hello</li>
</ul>
css
ul{
border:2px solid red;
display:inline-block;
}
li{
display:inline;
padding:0 30%; /* try adjusting the side % to give a feel of center aligned.*/
}
Aquí hay una demo. http://codepen.io/anon/pen/HhBwx
ul { display:table; margin:0 auto;}
<html>
<body>
<ul>
<li>56456456</li>
<li>4564564564564649999999999999999999999999999996</li>
<li>45645</li>
</ul>
</body>
</html>