Tengo un sitio web, y necesito tener una imagen centrada en la parte inferior de la página visible. Entonces, en cualquier tamaño de pantalla, la imagen seguirá estando en la parte inferior y centrada.¿Cómo pego una imagen en la parte inferior de la pantalla visible y me centro?
con css puro se puede lograr esto en todos los navegadores nuevos
.fix{
position:fixed;
bottom:0px;
left:50%;
}
<img src="yourimagepath" class="fix"/>
y para IE6 puede utilizar en lugar de position:absolute; fijo. Posicionará la imagen en la parte inferior de la página, pero a medida que se desplaza hacia arriba, la imagen se desplazará con la página. Por desgracia posición: fijo en no soportado en IE6
Posición IF: trabajos absolutos, ¿por qué molestarse con la posición: se ha corregido en los navegadores más nuevos? – xandy
@xandy: Fijo es la posición de un objeto en relación con la ventana del navegador. Absoluta es la posición de un objeto en relación con su elemento contenedor –
@shawn: vi tu código. intenta usar la clase ARR en la imagen dentro del div y no en el div –
Debe ponerlo en un div y luego, imaginar su imagen es 500 píxeles de ancho:
div.className{
position:absolute;
margin-left: -250px; /* very important for the image to be centered */
left:50%;
bottom:0px;
}
vieja pregunta, pero aquí es la mejor solución que se me ocurrió. Coloque la imagen en un contenedor div, el div se coloca en la parte inferior de la pantalla y la imagen se centra en su interior. El div tiene un ancho establecido del 100%, por lo que la imagen se puede centrar correctamente. Para el margin:auto; para trabajar la imagen debe aparecer como un elemento de la tabla con el display:table;
Usando display:table; significa que usted no tiene que establecer un ancho fijo al elemento que desea centrada.
<style>
.sticky-image-wrapper{
position: fixed;
bottom: 0;
width: 100%;
}
.sticky-image-wrapper img{
display: table;
position: relative;
margin: auto;
}
</style>
<div class="sticky-image-wrapper">
<img src="myimage.jpg" />
</di>
A la izquierda el 50% no lo coloca en el centro de mi enlace. testing-zone-51.blogspot.com – Shawn
Ok, resolví el problema :) – Shawn
ya que es un nuevo usuario aquí, seleccione la mejor respuesta para un problema como respuesta aceptada cuando se solucione el problema. Ayuda a señalar a los demás la solución que funcionó para usted y le da reputación al que responde –