Foros del Web » Diseño web » CSS »

alinear verticalmente al centro, div con imágenes

Estas en el tema de alinear verticalmente al centro, div con imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/10/2006, 10:58
Avatar de kctus
Usuario baneado!
 
Fecha de Ingreso: noviembre-2002
Ubicación: ToledoBsAsGaliciaBolivia
Mensajes: 1.039
Antigüedad: 11 años, 11 meses
Puntos: 1
alinear verticalmente al centro, div con imágenes

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 {
    
height80px;
    
width280px;
    
margin-left5px;
    
margin-top5px;
    
margin-bottom5px;
    
floatleft;
    
vertical-alignmiddle;

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
  #2 (permalink)  
Antiguo 17/10/2006, 16:39
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.816
Antigüedad: 11 años, 7 meses
Puntos: 51
Hola kctus, ¿podrias poner el código completo? o al menos la parte html que usas para la imagen
  #3 (permalink)  
Antiguo 17/10/2006, 17:08
Avatar de kctus
Usuario baneado!
 
Fecha de Ingreso: noviembre-2002
Ubicación: ToledoBsAsGaliciaBolivia
Mensajes: 1.039
Antigüedad: 11 años, 11 meses
Puntos: 1
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 {
    
height90px;
    
width776px;
}
#header #imagenesheader { 
    
height80px
    
width280px
    
margin-left5px
    
margin-top5px
    
margin-bottom5px
    
floatleft
    
vertical-alignmiddle

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
  #4 (permalink)  
Antiguo 17/10/2006, 22:24
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.816
Antigüedad: 11 años, 7 meses
Puntos: 51
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> 
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 00:58.
SEO by vBSEO 3.3.2