Foros del Web » Creando para Internet » CSS »

Centrar imagen dentro de capa

Estas en el tema de Centrar imagen dentro de capa en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/09/2010, 18:23
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Centrar imagen dentro de capa

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
__________________
Cool Village
@Wakkos
  #2 (permalink)  
Antiguo 16/09/2010, 19:39
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Centrar imagen dentro de capa

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.

Última edición por matius; 16/09/2010 a las 20:11 Razón: Ultimo cambio
  #3 (permalink)  
Antiguo 17/09/2010, 03:02
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Centrar imagen dentro de capa

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?
__________________
Cool Village
@Wakkos
  #4 (permalink)  
Antiguo 17/09/2010, 07:23
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Centrar imagen dentro de capa

¿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.
  #5 (permalink)  
Antiguo 17/09/2010, 08:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar imagen dentro de capa

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)
  #6 (permalink)  
Antiguo 17/09/2010, 15:35
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Centrar imagen dentro de capa

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*
__________________
Cool Village
@Wakkos
  #7 (permalink)  
Antiguo 18/09/2010, 18:09
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Centrar imagen dentro de capa

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...
__________________
Cool Village
@Wakkos
  #8 (permalink)  
Antiguo 18/09/2010, 18:11
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 2 meses
Puntos: 59
Respuesta: Centrar imagen dentro de capa

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

http://www.youtube.com/watch?v=xos2MnVxe-c
__________________
Cool Village
@Wakkos

Etiquetas: capas
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:17.