Centrar una imagen

Kalamor · #1 (**permalink**) 10/04/2006, 02:26

hola,
Soy bastante novato en la maquetación por capas (siempre he utilizado tablas). Mi problema es:
Tengo una imagen de tamaño: 600px por 370px y quiero ponerla de fondo en el centro (vertical y horizontal) de la pagina.
Para en centro horizontal, no he tenido problema: uso el margin-left:auto y margin-right:auto.
Pero no logro centrar la imagen verticalmente, no me coge ni el height:100%, ni el height: auto, ni el vertical-align: middle.
¿Alguien sabe como se hace?
Gracias

caricatos · #2 (**permalink**) 10/04/2006, 02:35

Hola Kalamor:

Yo suelo hacer los centrados de imágenes poniéndolas como fondo de una capa y centrándola con estilos:

#capa {
width: 100%;
height: 100%;
background: url(imagen.jpg) no-repeat center center;
}

Saludos

Kalamor · #3 (**permalink**) 10/04/2006, 02:44

Lo acabo de probar pero de esta forma no puedo escribir encima, quiero decir que si quiero poner una frase en un lugar concreto de la imagen, no puedo saberlo (el lugar).
Gracias igualmente

#4 (**permalink**) 10/04/2006, 03:48

jay, kalamor, como va la cosa, hace tiempo que no hablamos, jajajajaja
te pongo como lo hago yo

css

Código:

html{
	height: 100%;
}
body{
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#contenidor {
	margin-left : auto;
	margin-right : auto;
	width : 600px;
	vertical-align : middle;
	height : 100%;
}

#presentacio {
	background : url(../images/presentacio.jpg) no-repeat 50%;
	min-height : 370px;
	height: 100%;
}

html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title></title>
<link rel="stylesheet" href="css/prueba1.css">
</head>
<body>
<div id="contenidor">
	<div id="presentacio"></div>
</div>
</body>
</html>

Venga un saludito para todos !!!!

Kalamor · #5 (**permalink**) 10/04/2006, 03:50

Gracias tio,
Va perfect

Kalamor · #6 (**permalink**) 10/04/2006, 04:57

Buscando por internet, perrogrun ha encontrado otro codigo mejor:
Trata de utilizar el posicionamiento absoluto y los margenes negativos:
El resultado aplicado a mi caso seria:

#contenidor {
position: absolute;
left: 0px;
top: 50%;
width : 100%;
overflow: visible;
visibility: visible;
display: block;
}

#presentacio {
background : url(../images/presentacio.jpg) no-repeat;
position: absolute;
left: 50%;
min-width: 600px;
width: 600px;
min-height : 370px;
height: 370px;
margin-left: -300px;
top: -185px;
visibility: visible;
}

Un saludo