Foros del Web » Creando para Internet » CSS »

Centrar una imagen

Estas en el tema de Centrar una imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/04/2006, 03:26
 
Fecha de Ingreso: septiembre-2002
Ubicación: Bangui
Mensajes: 58
Antigüedad: 15 años, 3 meses
Puntos: 0
Centrar una imagen

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
__________________
Nuestros sueños seguiran infectando vuestras hipocresias
  #2 (permalink)  
Antiguo 10/04/2006, 03:35
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 10/04/2006, 03:44
 
Fecha de Ingreso: septiembre-2002
Ubicación: Bangui
Mensajes: 58
Antigüedad: 15 años, 3 meses
Puntos: 0
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
__________________
Nuestros sueños seguiran infectando vuestras hipocresias
  #4 (permalink)  
Antiguo 10/04/2006, 04:48
perrogrun
Invitado
 
Mensajes: n/a
Puntos:
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 !!!!
  #5 (permalink)  
Antiguo 10/04/2006, 04:50
 
Fecha de Ingreso: septiembre-2002
Ubicación: Bangui
Mensajes: 58
Antigüedad: 15 años, 3 meses
Puntos: 0
Gracias tio,
Va perfect
__________________
Nuestros sueños seguiran infectando vuestras hipocresias
  #6 (permalink)  
Antiguo 10/04/2006, 05:57
 
Fecha de Ingreso: septiembre-2002
Ubicación: Bangui
Mensajes: 58
Antigüedad: 15 años, 3 meses
Puntos: 0
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
__________________
Nuestros sueños seguiran infectando vuestras hipocresias
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




La zona horaria es GMT -6. Ahora son las 17:49.