como hago para que una imagen de cualquier tamaño en el centro de la pagina?

Coplo · #1 (**permalink**) 25/03/2009, 19:43

Hola, quisiera que me ayuden a que cada vez que ingrese una imagen de cualquier tamaño se quede en el centro de la pagina este es mi codigo:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Informática Empresarial</title>
</head>

<body>

<div class="image">
<img src="calavera1.gif" border="0"></div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
body {
background:url(image.jpg) top right no-repeat fixed #FFF;
}
.image{
position: absolute;
top: 50%;
left: 50%;
margin-top: -219px;
margin-left: -288px;
}

Calizman · #2 (**permalink**) 25/03/2009, 22:23

Saludos!!

Dejame le doy un pequeño retoque a tu CSS si?

En vez de esto:
.image{
position: absolute;
top: 50%;
left: 50%;
margin-top: -219px;
margin-left: -288px;
}

Pones esto:

.image{
margin: 0px auto;
}

Hasta Luego!!

gorkreg · #3 (**permalink**) 26/03/2009, 03:00

Coloca la imágen dentro de una división y dale a esa div las mismas reglas que habías usado para .image. Supongo que la imágen mide 221px x 576px.

Debería funcionar. Dime qué tal va.

Coplo · #4 (**permalink**) 26/03/2009, 06:16

Noce que ise mal, porque la imagen se ubico en otro citio, si me puedes dar un pequeño ejemplo gorkreg te lo agradeceria

gorkreg · #5 (**permalink**) 26/03/2009, 08:34

HTML:
<div id="image">
<img src="calavera1.gif" border="0">
</div>

CSS:
#image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -219px;
margin-left: -288px;
}

Este es el código que tienes que usar. No entiendo lo que quieres decir con "la imagen se ubico en otro citio" (???!!!).

Mikmoro · #6 (**permalink**) 26/03/2009, 16:37

gorkreg: creo que el título dice "una imagen de cualquier tamaño"

Coplo: ¿hablas de centrado horizontal o vertical?
(por favor, revisa un poco tu ortografía, gracias)

gorkreg · #7 (**permalink**) 27/03/2009, 11:09

Bueno, la verdad es que entre la ortografía y los títulos confusos ("como hago para que una imagen de cualquier tamaño en el centro de la pagina?" para que...¿qué?) el que no entiendo nada soy yo. Por favor, Coplo, explícate un poco mejor para que te podamos ayudar.

Mikmoro · #8 (**permalink**) 27/03/2009, 11:15

Sí, no resulta fácil

caricatos · #9 (**permalink**) 27/03/2009, 12:42

Hola:

Como reglas general para centrar objetos (siempre horizontalmente), se usa text-align: center para elementos inline como texto e imágenes, y margin: auto para elementos en bloque... pero verticalmente, la alineación es algo bastante más complejo... en el caso de las imágenes es algo más sencillo si la imagen se pone de fondo (en las Faq's se encuentra la respuesta)

Saludos