Centrar imagen dentro de un div

manuxdjent · #1 (**permalink**) 22/04/2012, 11:09

¿Alguien me puede decir como centrar una imagen dentro de un div?, la imagen está encima de otro div que es el fondo, lo he puesto así para que cuando se redimensione la ventana se adapte el fondo, éste es el código que he usado, espero que me podáis ayudar,

Archivo CSS

Código:

#fondo
{
position:absoulte;
z-index:1;
width:100%;
height:100%;
}
#logo{

position:absolute;
z-index:2;
}
body, html {
margin:0;
padding:0;
width:100%;
height:100%;
}

Archivo HTML

Código:

<!DOCTYPE HTML>
<HTML>
	<HEAD>

	<LINK rel="stylesheet" type="text/css" href="estilo.css">
	</HEAD>
	<BODY>
			<DIV>
			<IMG src="logo.png" name="logo" id="logo">
			
</DIV>
		<DIV>
			<IMG id="fondo" src="fondo.png">
			
		</DIV>

	</BODY>
</HTML>

Saludos

comablck · #2 (**permalink**) 22/04/2012, 14:10

dependiendo el tamaño de la imagen q queres centrar tendrias q cambiarle los margenes (margin-top, margin-left), por ejemplo:

Cita:

#fondo
{
position:absoulte;
z-index:1;
width:100%;
height:100%;
}
#logo{
position:absolute;
z-index:2;
left:50%;
margin-left:-310px;
top:50%;
margin-top:-15%
}
body, html {
margin:0;
padding:0;
width:100%;
height:100%;
}

Cita:

otra forma de hacerlo es mediante javascript calculando el ancho y alto de la pantalla..

cristian_cena · #3 (**permalink**) 22/04/2012, 15:28

acá explican en detalle el centrado horizontal y vertical de cajas de bloque:
http://www.librosweb.es/css/capitulo...icalmente.html
http://www.librosweb.es/css/capitulo...ntalmente.html

Si la caja es de linea el centrado horizontal se logra con text-align:center; y el vertical dando un valor de line-height equivalente al height de su padre de bloque.