como puedo colocar 2 imagenes a la misma altura?

metlich · #1 (**permalink**) 12/11/2011, 15:02

estoy haciendo el encabezado de mi pagina, y quiero poner enmedio el banner principal y en el lado derecho un pequeño icono de fb.. cmo lo hago para ponerlos a la misma altura?

le probe con css teniendo el icono de fb como float:right; pero como no existe el float:center; se seguia poniendo por debajo del nivel del banner. AYUDA!!

Este es el codigo:

<html>
<head>
<title>Enca</title>
</head>
<font face="Arial" size="2"><b>
<body bgcolor="black">
<center>
<img src="fondo1.jpg" height="160" width="800" />
</center>
<img src="fb.jpg" height="30" width="30" />

</body>
</html>

linuxzero · #2 (**permalink**) 14/11/2011, 14:37

Como solución rapida te puedo ofrecer de colocarle float:left; tanto al icono de fb como al banner, esto te lo va a poner a la misma altura, pero dependiendo, de la dimension de la página, el banner te puede quedar centrado o no.

Si pretendes que quede totalmente centrado vas a tener que recurrir al atributo position:absolute; y jugar con los atributos right y left para darle el margen y asi centrarlo.

y despues probar al icono de fb lo mismo, esto puede traer problemas dependiendo del diseño del sitio.

Te invito a probarlo y avisarnos cualquier cosa ;)

Saludos

rege · #3 (**permalink**) 15/11/2011, 05:20

Y si pruebas esto...

Código:

<div class="banner">
<img src="fondo1.jpg" height="160" width="800" />
<img src="fb.jpg" height="30" width="30" />
</div>

luego el div.banner le añades Css, por ejemplo:

Código:

div.banner{
width:830px;
margin: 0 auto;
}

Así se centrará todo el div en medio de la página, independientemente del tamaño de la ventana.

luego para las imagenes, pues como te dice linuxzero, con float:left;

Código:

div.banner img{
float:left;
}

Espero te sirva.

MarioMX · #4 (**permalink**) 15/11/2011, 10:59

saludos Metlich,

anexo el siguiente código, espero te funcione.

Código:

<html>
<head>
<title>Enca</title>
<style>
center {width:830px; margin:0 auto;}
center img {width:800px;float:left; text-align:center;}
.fb {width:auto; float:left;}
</style>
</head>
<font face="Arial" size="2"><b>
<body bgcolor="black">
<center> 
<img src="fondo1.jpg" height="160" width="800" />
<img class="fb" src="fb.jpg" height="30" width="30" />
</center>
</body>
</html>