Comment coller une image en bas de l'écran visible et être centré?

Question

J'ai un site web, et j'ai besoin d'avoir une image centrée en bas de la page visible. Ainsi, quelle que soit la taille de l'écran, l'image sera toujours en bas et centrée.

Answer 1

en utilisant css pur, vous pouvez y parvenir dans tous les nouveaux navigateurs

.fix{ 
    position:fixed; 
    bottom:0px; 
    left:50%; 
    } 
<img src="yourimagepath" class="fix"/> 

et pour IE6, vous pouvez utiliser position:absolute; au lieu de fixe. il positionnera l'image au bas de la page mais lorsque vous faites défiler vers le haut, l'image défilera avec la page. malheureusement position: fixed dans pas prise en charge dans IE6

Answer 2

Vous devriez le mettre dans un div puis, en imaginant votre image est 500px large:

div.className{ 
position:absolute; 
margin-left: -250px; /* very important for the image to be centered */ 
left:50%; 
bottom:0px; 
} 

Answer 3

question ancienne mais voici la meilleure solution que je suis venu avec. Placez l'image dans un conteneur div, la div est positionnée au bas de l'écran et l'image est centrée à l'intérieur. Le div a une largeur de 100% pour que l'image puisse se centrer correctement. Pour le margin:auto; travailler l'image doit être affiché comme un élément de table avec le display:table;

En utilisant display:table; signifie que vous ne devez pas définir une largeur fixe à l'élément que vous voulez centré.

<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>