alinear verticalmente al centro, div con imágenes

kctus · #1 (**permalink**) 17/10/2006, 10:58

Aquí iniciándome al CSS... dejando de lado mis queridas tablas...

Tengo un div que sólo tiene imágenes, y pretendo que se alinie todo el conjunto en el centro (vertical)

Ahora mismo, uso esto:

Código PHP:

  #header #imagenesheader { 
    height: 80px; 
    width: 280px; 
    margin-left: 5px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    float: left; 
    vertical-align: middle; 
}

Y no anda, el conjunto de 4 imágenes se queda alineado arriba del todo, quedando unos píxeles "libres" antes de llegar al margen inferior.
Alguna idea?
graciaaas

kahlito · #2 (**permalink**) 17/10/2006, 16:39

Hola kctus, ¿podrias poner el código completo? o al menos la parte html que usas para la imagen

kctus · #3 (**permalink**) 17/10/2006, 17:08

Claro, ahí va:

(son 4 imágenes, todas seguidas aunque la idea es que la grande esté arriba, y las otras tres debajo, por eso el ancho del Div)

Código PHP:

  <div id="header"> 
<div id="imagenesheader"> 
<a href="index.php"><img src="imagenes/titulo.jpg" width="250" height="50" border="0" /></a> 
<a href="index.php"><img src="imagenes/home.gif"  width="60" height="25" border="0" /></a> 
<a href="misitio.php"><img src="imagenes/miimagen.gif"  width="140" height="25" border="0" /></a> 
<a href="faq.php"><img src="imagenes/FAQ.gif" width="50" height="25" border="0" /></a> 
</div> 
</div>

Código PHP:

  #header { 
    height: 90px; 
    width: 776px; 
} 
#header #imagenesheader {  
    height: 80px;  
    width: 280px;  
    margin-left: 5px;  
    margin-top: 5px;  
    margin-bottom: 5px;  
    float: left;  
    vertical-align: middle;  
}

La cosa es esa, se queda bien ajustado a la izquierda del div superior, pero el contenido que está dentro de este div no se alinea al centro del mismo. Quizás la opción sería reducir el tamaño del segundo div para que las imágenes se quedaran "apretadas" y luego, ampliar los margenes para cuadrarlo bien??

gracias

kahlito · #4 (**permalink**) 17/10/2006, 22:24

Prueba así:

Código HTML:

<style type="text/css">
#contenedor { 
	position:absolute; 
	top:50%; 
	left:50%; 
	width:776px; 
	height:90px; 
	margin-left:-388px; 
	margin-top:-45px; 
	background:#33FF33;}
#imagenes {
        height: 90px;
        width: 280px;
	margin:0 auto;
}
 </style>
</head>

<body>
<div id="contenedor">
<div id="imagenes">
<a href="index.php"><img src="imagenes/titulo.jpg" width="250" height="50" border="0" /></a>
<a href="index.php"><img src="imagenes/home.gif"  width="60" height="25" border="0" /></a>
<a href="misitio.php"><img src="imagenes/miimagen.gif"  width="140" height="25" border="0" /></a>
<a href="faq.php"><img src="imagenes/FAQ.gif" width="50" height="25" border="0" /></a>
</div>
</div>  
</body>