Como centrar una lista en css

Lista css

Para lograr lo que está tratando de hacer, podría probar una de las siguientes sugerencias dependiendo del estilo que desee lograr. La primera hace que la viñeta forme parte del contenido de la lista y la centra junto con el texto; sin embargo, no la utilizarás si quieres que el comienzo de cada elemento de la lista esté alineado:

Quiero que las viñetas empiecen justo debajo de «datos curiosos», pero no puedo hacerlo, no tengo ni idea de por qué, o incluso, borraría las viñetas, pero entonces los textos tienen que empezar debajo de «datos curiosos», como todos los textos anteriores. Ya sabes lo que quiero decir #beginner Gracias

Gracias. Antes podía centrar mi lista desorganizada, pero la última frase de cada viñeta quedaba centrada en la página, y yo quería que quedara alineada a la izquierda con el resto del texto. Esto me funcionaba muy bien.

Css alinear los elementos de la lista horizontalmente

Al flotar tu LI a la izquierda, literalmente flotas tu contenido a la izquierda y luego debes usar uno de los Hacks mencionados anteriormente para centrar tu UL. Display:inline-block crea su propiedad Float por usted (más o menos). Toma tu elemento LI y lo convierte en un elemento de bloque que se coloca uno al lado del otro (no flotante).

Con el diseño responsivo y el uso de frameworks como Bootstrap o Foundation, habrá problemas al tratar de flotar y centrar el contenido. Tienen algunas clases incorporadas, pero siempre es mejor hacerlo desde cero. Esta solución es mucho mejor para los menús dinámicos (como el sistema de menús de Adobe Business Catalyst).

Center list bullets css

Except my <ul> doesn’t have a parent div. ul { margin: 0 auto; } doesn’t work because I don’t have a fixed width. ul { text-align: center; } doesn’t work because the list-items won’t be left aligned anymore. So how can I center this <ul> while keeping the <li>s left aligned (without having a parent div wrapper)?

EDIT: Perhaps my wording wasn’t the best… The first block of code already works… what i need is to do it without the <div> wrapper, if that’s possible of course. Float tricks? Pseudo element tricks? There must be a way.

If I understand correctly, you want the list items to be in the middle of the screen, but you want the text IN those list items to be centered to the left of the list item itself. Doing that is actually pretty easy. You just need some CSS:

And it works! Here is what is happening. First, we say we want to affect only unordered lists. Then, we do Rafael Herscovici’s trick for centering the list items. Finally, we say to align the text to the left of the list items.

Centro ol css

Here is a quick CSS tutorial showing how to center-align a list element with left-aligned text. Por ejemplo, si tienes un <ul> o <ol> de ancho desconocido, y quieres que permanezca centrado en la página y mantener el texto interior alineado a la izquierda. Ese es el truco que estamos viendo en este tutorial.

Trabajando en la página de testimonios de mi nueva librería, quería centrar la lista desordenada sin especificar un ancho. Cuando se especifica un ancho, la alineación al centro es fácil usando margin: auto;. Como en este ejemplo:

Cuando vas por ese camino, obtienes una lista alineada al centro con todo el texto alineado a la izquierda. Así que esta es la solución más fácil para las listas (y otros elementos) que tienen un ancho fijo conocido/establecido. Pero, por supuesto, yo no quería especificar un ancho para este caso particular.

Las viñetas de la lista se muestran alineadas a la izquierda, pero el texto de la lista está alineado al centro. Así que hay un extraño espacio entre las viñetas y el texto de cada elemento de la lista. La solución es hacer que la lista sea un bloque en línea y establecer su alineación de texto a la izquierda. Este es el código final: