Foros del Web » Creando para Internet » HTML »

Centrar listado

Estas en el tema de Centrar listado en el foro de HTML en Foros del Web. Hola buenos dias, estoy realizando un listado con <ul><li></li></ul> y quiero centrarlo en la web pero todavia no lo logro. el codigo es el siguiente: ...
  #1 (permalink)  
Antiguo 07/03/2016, 09:55
Avatar de gringofer  
Fecha de Ingreso: agosto-2010
Ubicación: Córdoba, Argentina
Mensajes: 338
Antigüedad: 14 años, 3 meses
Puntos: 22
Centrar listado

Hola buenos dias, estoy realizando un listado con <ul><li></li></ul> y quiero centrarlo en la web pero todavia no lo logro.

el codigo es el siguiente:

Código HTML:
Ver original
  1. <div class="row">
  2.         <div class="col-md-12 lista">
  3.         <ul id="menu"><li><img src="img/llamada-telefonica.png" style="vertical-align:middle" align="left" alt="Llamadas ilimitadas" class="img-responsive"> Llama gratis a todos los Personales del Pais</li>
  4.                 <li><img src="img/torre-de-senales-wifi.png" align="left" alt="Llamadas ilimitadas" class="img-responsive"> Internet ILIMITADO todo el mes</li>
  5.                 <li><img src="img/globos-de-dialogo-de-chat-con-puntos-suspensivos.png" align="left" alt="Llamadas ilimitadas" class="img-responsive"> SMS Free a cualquier compañia</li>
  6.                 </ul>
  7.         </div>
  8.     </div>


En la hoja de estilos es:
Código HTML:
Ver original
  1. .lista li{
  2.    display: table-footer-group;
  3.    text-align:left;
  4.    margin: 0 8px 0 0;
  5. }
  6.  
  7. .lista ul{
  8.    list-style-type: none;
  9.    text-align:center;
  10. }
  11.  
  12. #menu {
  13.  float:none;
  14.  list-style-type:none;
  15.  position:relative;
  16. }
  17.  
  18. #menu li {
  19.  float:none;
  20.  position:relative;
  21.  right:50%;
  22. }


desde ya muchas gracias, saludos!
__________________
Si quieres cambio verdadero, pues camina distinto...
  #2 (permalink)  
Antiguo 07/03/2016, 15:55
 
Fecha de Ingreso: octubre-2015
Mensajes: 13
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Centrar listado

Por que no centras el div poniendole un nombre? Porque asi te queda el class pero pones #lista y pones float:center
  #3 (permalink)  
Antiguo 07/03/2016, 16:50
Avatar de gringofer  
Fecha de Ingreso: agosto-2010
Ubicación: Córdoba, Argentina
Mensajes: 338
Antigüedad: 14 años, 3 meses
Puntos: 22
Respuesta: Centrar listado

intente probarlo pero no funciono!
__________________
Si quieres cambio verdadero, pues camina distinto...
  #4 (permalink)  
Antiguo 08/03/2016, 12:07
Avatar de danielpatc  
Fecha de Ingreso: marzo-2016
Mensajes: 40
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Centrar listado

si usas bootstrap
prueba asi:
<div class="row col-md-8 col-md-offset-2">
  #5 (permalink)  
Antiguo 09/03/2016, 06:21
Avatar de gringofer  
Fecha de Ingreso: agosto-2010
Ubicación: Córdoba, Argentina
Mensajes: 338
Antigüedad: 14 años, 3 meses
Puntos: 22
Respuesta: Centrar listado

Cita:
Iniciado por danielpatc Ver Mensaje
si usas bootstrap
prueba asi:
<div class="row col-md-8 col-md-offset-2">
Probe haciendo eso, y creo que es la unica manera, solo que hay que hacerlo para todos los tipos de pantalla y en algunos no queda bien
__________________
Si quieres cambio verdadero, pues camina distinto...
  #6 (permalink)  
Antiguo 09/03/2016, 10:22
Avatar de Pantera80  
Fecha de Ingreso: noviembre-2014
Ubicación: España
Mensajes: 35
Antigüedad: 10 años
Puntos: 6
Respuesta: Centrar listado

Buenas,

Prueba con esto:

Código:


Código HTML:
Ver original
  1. <div class="col-xs-6 col-xs-offset-3 lista">
  #7 (permalink)  
Antiguo 09/03/2016, 14:25
Avatar de gringofer  
Fecha de Ingreso: agosto-2010
Ubicación: Córdoba, Argentina
Mensajes: 338
Antigüedad: 14 años, 3 meses
Puntos: 22
Respuesta: Centrar listado

Cita:
Iniciado por Pantera80 Ver Mensaje
Buenas,

Prueba con esto:

Código:


Código HTML:
Ver original
  1. <div class="col-xs-6 col-xs-offset-3 lista">
Si eso fue lo que hice, es lo unico que se me ocurre, ir corriendo las columnas y ver segun el tamaño cuantas correr, muchas gracias!
__________________
Si quieres cambio verdadero, pues camina distinto...

Etiquetas: bootstrap, css
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.