Foros del Web » Creando para Internet » CSS »

No logro centrar la imagen verticalmente

Estas en el tema de No logro centrar la imagen verticalmente en el foro de CSS en Foros del Web. Hola a todos, soy nuevo en todo esto y estuve mirando por todos los sitios y no consigo centrar verticalmente la imagen. Les paso la ...
  #1 (permalink)  
Antiguo 27/11/2012, 16:29
 
Fecha de Ingreso: noviembre-2012
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
No logro centrar la imagen verticalmente

Hola a todos, soy nuevo en todo esto y estuve mirando por todos los sitios y no consigo centrar verticalmente la imagen.
Les paso la pagina para que me digan como hacer.
El tamaño de la imagen es de 801 x 608 px. y quisiera centrarla dentro de Main_content


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE> hoja prueba</TITLE>
<STYLE TYPE="TEXT/CSS">
<!--

BODY {

BACKGROUND-COLOR: ORANGE;
MARGIN-TOP:0PX;

}

#WRAPPER {
WIDTH: 1000PX;
HEIGHT:1000PX;
MARGIN-LEFT: AUTO;
MARGIN-RIGHT: AUTO;
BACKGROUND-COLOR: BLACK;

}


#WRAPPER #HEADER {
WITDH: 1000PX;
HEIGHT: 150PX;
BACKGROUND-COLOR: RED;
BACKGROUND-REPEAT: NO-REPEAT;
}

#WRAPPER #MENU {
WITDH: 100%;
HEIGHT: 50PX;
BACKGROUND-COLOR:#b6d9fb;
BORDER-TOP: SOLID 6PX;
}

#WRAPPER #MAIN_CONTENT {
WITDH: 100%;
HEIGHT: 769PX;
BACKGROUND-COLOR: WHITE;
TEXT-ALIGN:CENTER;


}




#WRAPPER #FOOTER {
WITDH: 100%;
HEIGHT: 25PX;
BACKGROUND-COLOR:#b6d9fb;
}

-->


</STYLE>
</HEAD>
<BODY>
<DIV ID="WRAPPER">
<DIV ID="HEADER">
</DIV> <!-- HEADER -->
<DIV ID="MENU">
</DIV> <!-- MENU -->
<DIV ID="MAIN_CONTENT">
<img src="IMAGENES/MAIN_CONTENT1.JPG"></div>
</DIV> <!-- MAIN_CONTENT -->
<DIV ID="FOOTER">
</DIV> <!-- FOOTER -->
</DIV> <!-- WRAPPER-->




</BODY>
</HTML>
  #2 (permalink)  
Antiguo 27/11/2012, 17:33
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 9 meses
Puntos: 86
Respuesta: No logro centrar la imagen verticalmente

Hola lee este post tal ves te ayude a centrar verticalmente
http://www.forosdelweb.com/f53/centr...o-div-1019065/
__________________
Saludos!
----------------------------------------------------------
  #3 (permalink)  
Antiguo 28/11/2012, 08:07
 
Fecha de Ingreso: noviembre-2012
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: No logro centrar la imagen verticalmente

Gracias por la respuesta pero en ese hilo hablan de alinear texto y lo que yo quiero es alinear verticalmente una imagen solamente y no lo quiero hacer por tablas.
Gracias
  #4 (permalink)  
Antiguo 28/11/2012, 08:43
Avatar de yandorf  
Fecha de Ingreso: julio-2012
Mensajes: 40
Antigüedad: 11 años, 8 meses
Puntos: 6
Respuesta: No logro centrar la imagen verticalmente

Hola al #MAIN_CONTENT ponle position: relative; y agrega estoa tu css

Código:
#MAIN_CONTENT img
{
  	position: absolute;
   	top: 50%;
   	left: 50%;
   	width: 801px;
   	height: 601px;
   	margin-top: -300px; /* mitad del alto */
   	margin-left: -400px; /* mitad del ancho */
}
Centrará la imagen horizontal y verticalmente.

Saludos
__________________
"Se necesita una razón para ayudar a alguien?"
Zidane Trival
  #5 (permalink)  
Antiguo 28/11/2012, 09:05
 
Fecha de Ingreso: noviembre-2012
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: No logro centrar la imagen verticalmente

Cita:
Iniciado por yandorf Ver Mensaje
Hola al #MAIN_CONTENT ponle position: relative; y agrega estoa tu css

Código:
#MAIN_CONTENT img
{
  	position: absolute;
   	top: 50%;
   	left: 50%;
   	width: 801px;
   	height: 601px;
   	margin-top: -300px; /* mitad del alto */
   	margin-left: -400px; /* mitad del ancho */
}
Centrará la imagen horizontal y verticalmente.

Saludos
Gracias amigo, pero no me funciona
  #6 (permalink)  
Antiguo 28/11/2012, 23:55
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 3 meses
Puntos: 306
Respuesta: No logro centrar la imagen verticalmente

Fijate esta respuesta

Espero que logres entenderme, aunque no habla de imagenes, intenté explicar como funciona la alineación vertical.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: imagenes
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 18:39.