Centrar imagen en web
Hola, quisiera centrar una imagen un mi web, pero no es tan sencillo. Quiero crear un slide de imágenes centrado por supuesto y encima de él poner una imagen que irá encima pero transparente en el medio para ver el slide. Es imagen se vería a los lados del slide ya que en el centro sería transparente para ver el slide.
Pero quiero que al redimensionar la página con el ratón siempre permanezca centrada como el comportamiento de un background. No sé si se me entiende bien. Sería algo como http://www.rio2016.com el slide y la imagen que aparece a los lados.
Llevo días con esto y no consigo, lo más aproximado es poner como fondo de un div la imagen pero así las imágenes del slide van por encima de ella y no me vale.
Ayudadme por favor!! Gracias
1 respuesta
Lo que yo haría es lo siguiente:
1. Tomo un div que va a encapsular la imagen, sea que dentro del div este la etiqueta IMG o que le coloques la propiedad backgroun. A este lo llamare #DivImg.
2. Tu slide que este en otro div diferente. A este lo llamare #DivSlide
Ahora lo que vas a ser es simple, en los estilos, la hoja CSS vas a agregar esto:
#DivImg,#DivSlide
{
display: absolute !important;
}
#DivImg
{
/*Esto es para poder determinar la posicion de la imagen ya que el display absoluto pone a flotar el div*/
margin-top: 15px;
margin-left: 15px;
/*Esto lo que hace es sobreponer los div, va de 0 a 20, sea 0 el mas atrás y 20 el mas encima*/
z-index: 0;
}
#DivSlide
{
/*Esto es para poder determinar la intentar de la imagen ya que el display absoluto pone a flotar el div*/
margin-top: 15px;
margin-left: 15px;
/*Esto lo que hace es sobreponer los div, va de 0 a 40, sea 0 el mas atrás y 20 el mas encima*/
z-index: 1;
}
Con esto te debe funcionar, como puedes leer en los comentarios de los estilos, puedes ver que las coordenadas de margenes para que sitúes bien los dos div como los necesitas. Como también puedes ver el DivImg tiene z-index: 0 para que se sitúe primero y DivSlide tiene z-index: 1; es para que se sitúe sobre el otro.
Espero te funcione y sea lo que necesitas, cualquier cosa me avisas.
Muchas gracias. Lo probaré y ya te digo a ver si me funciona. Gracias por tomarte la molestia de contestarme.
Muchas gracias.
¿Cómo te fue?
