[SOLUCIONADO] Lista horizontal centrada

[pabloabran08]

Hola, puede que les parezca que el tema es muy clasico, pero la verdad es que buscado un montón y ninguna solucion que he visto me ha funcionado.
Mi situación particular es la siguiente:

Tengo un div con con un width:600px
dentro de este div tengo una lista ul con style="width:200px; margin:0 auto;"
y dentro van los <li style="display:inline; line-height: 50px; width: 56px;">

Bueno aquí todo bien: Tengo mi lista horizontal, el <ul> queda centrado y los elementos de adentro se colocan uno al lado del otro.

Pero aquí es cuando mi caso es distinto a los que he leído por alli.
Los elementos de mi lista son generados por una consulta mySql, por lo tanto la cantidad de elementos que me arroja va dependiendo. Entonces mi <ul> no puede tener un tamaño fijo, porque sino ya no me entran los elementos en la misma linea.
Aqui llego al problema:

Si quito el "width=200px", entonces automáticamente el <ul> ocupa todo el espacio del div que lo contiene(600px) y <li> se van pegando a la izquierda.

Entonces no se que puedo hacer, si quito el "margin auto" para que mi <ul> quede del tamaño justo y necesario seria perfecto, pero entonces deja de ser centrado dentro del div y se pega a la izquierda. El resultado es el mismo...

He intentado varias cosas pero nada me ha dado resultado así que aquí estoy, pidiendo de su generosa ayuda.

Gracias de antemano!! Bueno falta decir que soy novato en el tema, puede que la solucion sea muy simple o la haya tenido bajo los ojos todo este rato hahah

[webosiris]

si los lis están inline, agregandole text-align:center al ul debería de funcionar.

[pabloabran08]

Iniciado por webosiris

si los lis están inline, agregandole text-align:center al ul debería de funcionar.

No funcionó :/ Los elementos li se siguen amontonando a la izquierda.

[juangemelo01]

Hola amigo, Revisa este ejemplo
http://codepen.io/elestudiantefantasma/pen/aAHBq
puedes hacer 2 cosas
mostrar un n numero de elementos fijos por consulta (paginador dinamico, ejemplo, que muestre 10 elementos por pagina dinamica) y la suma del ancho de uno de tus elementos + el magen de uno de tus elemento, a todo esto lo multiplicas por el nuero fijo y ese valor se lo asignas directamente al width del ul

la otra opcion es jugar con javascript (ya sea puro o con Ajax o JQuery), dependiendo del numero de registros que te muestre, haces una funcion para que lo multiplica por (ancho + margenes) y ese valor se lo asigne directamente a la propiedad de ancho del "ul" en pixeles
la otra opcion es

[pabloabran08]

A veces la consulta me arroja un solo elemento asi que tendre que optar por javascript. Buena idea la de multiplicar el ancho por mi numero de li!
Gracias por las respuestas!!
Mi problema está solucionado pero voy a marcarlo mañana, a ver si a alguien se le ocurre una forma con css que me intriga.

[webosiris]

Iniciado por pabloabran08

No funcionó :/ Los elementos li se siguen amontonando a la izquierda.

pues algo estarás haciendo mal, porque esto te los deja centrados:

Código HTML:

<ul>
<li>item1</li>
<li>item2</li>
</ul>
 

Código CSS:

ul{text-align:center}
li{display:inline}
 

de todas formas si necesitas darle un width fijo a los li, debes de usar inline-block en vez de inline.

[pabloabran08]

Lo he vuelto a probar, tienes toda la razón. funciona con los display inline. Muchas gracias!

[webosiris]

Iniciado por pabloabran08

Si me funciona para dejarlos centrados uno debajo del otro, pero lo que yo necesito es una lista horizontal con todos los elementos li uno al lado del otro

el ejemplo que yo puse hace justamente eso, todos los li uno al lado del otro.




PD: editastes justo cuando te estaba respondiendo. Me alegro que te haya funcionado.