Lista horizontal centrada en un div

[icisneros]

Hola, lo primero os pongo el codigo:

Código HTML:

<div id="iconhoriz" align="center">
    			<ul class="icons">
                
                                       
                       <li>
                          <a href="http://www.vendermiweb.com">
                          <img src="img.png" title="Inicio" alt="Inicio" width="32" height="32"><br>
                          <span class="sispan">Inicio</span>
                          </a>
                        </li>

                        
                                  
                       <li>
                          <a href="http://www.vendermiweb.com">
                          <img src="img.png" title="Foro" alt="Foro" width="32" height="32"><br>
                          <span class="sispan">Foro</span>
                          </a>
                        </li>
                        
                         </ul>

        </div> 

Y el CSS:

Código HTML:

#iconvert,
#iconhoriz {
	margin-top: 0px;

}

#iconvert .icons,
#iconhoriz .icons{
	padding:  0;
	
}	
#iconhoriz {
	padding:0pt 15px 0pt 0pt;
	background-position: 100% 100% !important;
	
}	

#iconvert {
	padding:15px 0pt 0pt 0pt;
	background-position: 0% 0% !important;
	
}	

/* link settings */
#iconvert li,
#iconhoriz li {

  float: left;
	text-align: center;
	margin:0;
	padding-right: 20px;
	padding-top: 10px;
  list-style: none;
	background: none;
	position: relative;
	display : inline;	
}


/*icon settings*/
#iconhoriz .icons {
	cursor: pointer;
	overflow: hidden;
	padding:  0;
	margin: 0px;
		
}
#iconvert .icons {
	cursor: pointer;
	overflow: hidden;
		padding:  0;
		margin: 0px;
}

/* And Now lets set up the caption box */
#iconhoriz .sispan,
#iconevert .sispan {
	padding: 0px;
	font-weight: bold;
    text-decoration: none;
    
}

img{
	border: none;
}
#iconhoriz a{
	height: 100%;
  text-decoration: none;
  display : inline;
    
}

#iconvert a{
	left:0;
	bottom: 0;
	width: 100%;
	display: block;
	background-position: 0 100%;
        text-decoration: none;
}

El problema es que quiero que la lista me salga centrada dentro del contenedor iconhoriz y siempre me sale alineada a la izquierda, he probado a cambiar el float:left; por center pero entonces de descuadra y ya no sale una lista horizontal.


Un saludo y gracias!

[tunait]

Buenas,

Si estás usando los elementos li como elementos de línea no es necesario que les apliques un float.

Al ser elementos de línea puedes centrarlos en su contenedor con text-align: center. Su contenedor es el elemento ul así que a ese elemento debes aplicar el estilos ahí y no al #iconhoriz.


Otra opción sería dejar los li como elementos de bloque (quitarles el display inline que les has aplicado) y flotarlos pero entonces para que se visualicen centrados deberás asignar una anchura específica a su contenedor (ul). No te sirve en este caso el text-align: center porque esto no centra contenido de bloque. Para centrar un contenedor de bloque debes asignarle una anchura y un margen izquierdo y derecho con un valor de auto.

un saludo

[icisneros]

La segunda opción no me sirve, porque el número de elementos como la anchura de la lista es variable en función del tipo de usuario.

Y sobre la primera opción, al quitar el float se descuadra, pasa cada icono a una linea diferente, pero de forma alterada, al quitar el inline hace la lista en vertical, pero al quitar el float hace una especie de lista vertical pero descuadrada.

Se os ocurre algo?

Un saludo!

[imagen021]

Hola! la respuesta es fácil. Como no defines el ancho total de tu <ul>, entonces toma el 100% de la página donde se muestra (o del div que lo contiene)... entonces, al hacer que los <li> floten a la izquierda para que estén uno al lado del otro, estos empiezan a la izquierda del UL ignorando el text-align:center que pueda tener el UL.

Solución:
marcar un ancho fijo al UL tal como width: (si cada li mide 50px multiplicar 50 por la cantidad de li que hay) y al margin:0px cambiarlo por margin: 0 auto (con esto harás que el UL respete el mismo margen de izquierda y derecha.

Saludos!!

[tunait]

Iniciado por icisneros

La segunda opción no me sirve, porque el número de elementos como la anchura de la lista es variable en función del tipo de usuario.

ok

Iniciado por icisneros

Y sobre la primera opción, al quitar el float se descuadra, pasa cada icono a una linea diferente, pero de forma alterada, al quitar el inline hace la lista en vertical, pero al quitar el float hace una especie de lista vertical pero descuadrada.

En cada item de la lista tienes insertada una imagen, un salto de línea y un texto en un span. Un elemento de línea no puede (o no debería) contener un salto de línea dentro de sí mismo. Eso es lo que te hace ese descuadre raro que dices. Si quitas el salto de línea entre la imagen y el span verás que se visaliza como quieres.

Si esas imágenes son íconos decorativos no deberías insertarlos como imagen en el contenido si no desde la hoja de estilos.

Código HTML:

<div id="iconhoriz" align="center">
    			<ul class="icons">
                
                                       
                       <li title="Inicio">
                          <a href="http://www.vendermiweb.com">
                                                <span class="sispan">Inicio</span>
                          </a>
                        </li>

                        
                                  
                       <li title="Foro">
                          <a href="http://www.vendermiweb.com">
                         
                          <span class="sispan">Foro</span>
                          </a>
                        </li>
                        
                         </ul>

        </div> 

Código:

#iconhoriz li {

/*  float: left;*/
	text-align: center;
	margin:0;
	padding-right: 20px;
	padding-top: 10px;
  list-style: none;
	background: none;
	position: relative;
	display : inline;
	background-image: url(img.png);
	background-repeat: no-repeat;
}

Eso, tal cual, se visualiza correctamente

[icisneros]

He añadido:

Código HTML:

#iconhoriz ul {
  width: 650px;
  margin: 0 auto;
  text-align: center;
}

Y he cambiado el margin: 0px; de li por magin: 0 auto;

Pero aún así no me funciona, aparentemente se mueve un poco a la derecha, pero no queda centrado.

¿Qué creeis que puede ser?

Un saludo!

[Mikmoro]

Prueba esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>icisneros</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0;}
body {text-align: center;}
.contenedor {margin: 30px;
font-weight: bold;
}
ul {list-style-type: none;
text-align: center;}
li {background-color: #ccc;padding: 4px 12px;display: inline;
}
</style>
</head>
<body>
<div class="contenedor">
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
</div>

</body>
</html>

[tunait]

Iniciado por icisneros

Y he cambiado el margin: 0px; de li por magin: 0 auto;

Todo dependerá de si usas el float o no o de si usas el inline.

Si usas float no te sirve el text-align en el contenedor padre ni el margin auto en los li.
Si usas inline no te sirve el margin auto pero sí el text-align del contenedor padre.

Tienes un lío de conceptos. No sé si has leído detenidamente lo que te expliqué en el primer mensaje

[icisneros]

Iniciado por tunait

Tienes un lío de conceptos. No sé si has leído detenidamente lo que te expliqué en el primer mensaje

Efectivamente, no te había entendido correctamente. Ya está solucionado.

Gracias a todos.

[imagen021]

En mi solución, si le das un ancho de 650px y el margin: 0 auto, lo centrará...

Pero si dentro de ese ul de 650 tienes 2 li que miden 50px cada uno... obviamente que los tirará a la izquierda de los 650px de tu UL...

Para entender como plantear las cosas te aconsejo siempre ponerle bordes a los elementos y luego ir quitándolos a medida que ves que van como tu quieres.

Saludos!!