Centrar imagen dentro de capa

Wakkos · #1 (**permalink**) 16/09/2010, 17:23

Hola! sigo con mis problemas de capas.

Tengo una capa de 4000px width, tiene una imagen alineada a la izquierda de digamos 200 px.

Como haría para que esa imagen aparezca centrada en pantalla? (vertical)
xD

matius · #2 (**permalink**) 16/09/2010, 18:39

Así se hace, aunque no será compatible con navegadores viejos como IE6

El truco es usar un SPAN para llevar a su posición la imagen y usar display:inline

Código HTML:

<html>
<head>


<style type="text/css">

.envolcentro { background-color: #FF3399;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:1024px; /* tamaño horizontal del div contenedor de la imagen */
    height:600px; /* tamaño vertical del div contenedor de la imagen */
}
.envolcentro * {

    vertical-align: middle;
}

/*\*//*/
.envolcentro {
    display: block;
}

/* Este es el truco */
.envolcentro span {
    display: inline-block;
    height: 100%;
    width: 1px; 
}
/**/
</style>
<!--[para internet  IE 8]><style>
.envolcentro span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

</head>

<body><div class="envolcentro">
<span></span><img  src="bottom.png" width="300" height="300" alt="none" /></div>
</body>
</html>

Agregas la clase class="envolcentro" a cualquier div donde quieras centrar verticalmente una imagen.

Al lado de la tag img se pone la tag <span></span> vacía.

Funciona en IE7, IE8, FireFox, Opera, Safari.

Wakkos · #3 (**permalink**) 17/09/2010, 02:02

Recuerda que están en un div de 4000px de ancho, sin embargo, el código es utilizable xD

Sin ambargo me surgen más problemas, ese mismo div, de 4000px de ancho, con su imagen alineada a la izquierda (www.wakkos.es) imagino que necesito Javascript para centrar ESA imagen dentro del DIV con respecto a la pantalla (ahora hablamos en horizontal): Me gustaría hacer que esa imagen que ves nada más entrar a la web, salga centrada.

Habría que centrar la posición izquierda del div y restarle la mitad del tamaño de la imagen, no?

matius · #4 (**permalink**) 17/09/2010, 06:23

¿Estas hablando de centrar una imagen o centrar un fondo?

No entiendo.

Si quieres centrar un fondo en la pantalla en XY

Simplemente usa:

body
{
background: url (laimagen.png) center no-repeat;
}

Si tu script no afecta el ancho de la página y no activa las barras espaciadoras no tendrías que preocuparte. Porque se centrará respecto a la pantalla.

kseso? · #5 (**permalink**) 17/09/2010, 07:35

Hola Wakkos
Mucho teimpo sin coincidir.
A ver si con un poco de suerte puedo publicar esta respuesta.

Interesante la propuesta que pretendes realizar con css: navegación horizontal, centrado en la vertical... etc

Creo que un punto interesante que deberías aportar es la compatibilidad con navegadores, rango de alturas (o si es "en cualquiera" por máxima y si habrá una mínima...) y hasta qué punto quieres lograr vía css y qué vas a gestionar con ayuda de js.

Creo recordar que hace ya un buen tiempo (más de un año) tratamos el tema de la navegación de los contenidos en horizontal frente a la clásica en vertical. Y al menos yo puse algunas páginas de ejemplo.
No puedo buscarte el tema(s) por los problemas que tengo para navegar el foro una vez loqueado.

Resumiendo, como la composición subyacente en tu intento me ha llamado la atención, me gustaría aclares lo anterior para ver si se me ocurre algo.

Un saludo.

P.D.: enhorabuena por el cambio de look en tu blog. Así que pasa los parabienes a su autora (¡Cómo se nota la mano femenina, jejeje)

Wakkos · #6 (**permalink**) 17/09/2010, 14:35

Hola Kseso! tengo a la autora muerta de risa por acá, y que por supuesto, muchas gracias =D

La navegación hasta cierto punto la tengo controlada, el problema es cuando carga la web centrar el logo. No pretendo centrarlo en horizontal, pero si en vertical osea: capacontenedora.left = 50% de la pantalla - (ancho imágen) /2

Tengo una capa contenedora de 8 capas, la primera el logo (todo esto horizontal), la segunda capa dentro de la capa contenedora contiene el primer post de wordpress, está a unos 1000 px de la capadel logo apra que no se vea al cargar.

No se si con eso os apañais...

La web en pruebas: http://www.wakkos.es

el CSS: http://wakkos.es/wp-content/themes/cool/style.css

El index: http://wakkos.es/codigo.php?uri=wp-c...cool/index.php

El header: http://wakkos.es/codigo.php?uri=wp-c...ool/header.php

Y si necesitáis ver cualquier otro archivo, usad el archivo codigo.php?uri=*url archivo*

Wakkos · #7 (**permalink**) 18/09/2010, 17:09

Ahora que lo pienso...

Capa del logo original:

Código HTML:

DIV.fotograma1 { position:absolute; left:0px; width:476px; top:34px; border:1px solid #000; text-align:left; }

Si uso dos neuronas, alargo la capa el 50% de la imagen y le doy esa misma cantodad en left=0?

Algo como. (ancho imagen: 314, entre dos: 157)

Código HTML:

DIV.fotograma1 { position:absolute; left:-157px; width:633px; top:34px; border:1px solid #000; text-align:left; }

Voy a probar...

Wakkos · #8 (**permalink**) 18/09/2010, 17:11

OMG! It's ALIVE!!! IT's ALIVEEEE!

http://www.youtube.com/watch?v=xos2MnVxe-c