Come si configura un'immagine nella parte inferiore dello schermo visibile e centrata?

Question

Ho un sito Web e ho bisogno di avere un'immagine centrata nella parte inferiore della pagina visibile. Quindi, in qualsiasi dimensione dello schermo, l'immagine sarà ancora in basso e centrata.

Answer 1

usando CSS puro è possibile raggiungere questo obiettivo in tutti i nuovi browser

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

e per IE6 è possibile utilizzare position:absolute; invece di fisso. posizionerà l'immagine nella parte inferiore della pagina ma mentre scorri verso l'alto l'immagine scorrerà con la pagina. Posizione purtroppo: fissa in non supportato in IE6

Answer 2

Si dovrebbe mettere in un div e poi, immaginando l'immagine è 500px di larghezza:

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

Answer 3

vecchia questione, ma qui è la soluzione migliore mi è venuta. Metti l'immagine in un contenitore div, il div è posizionato nella parte inferiore dello schermo e l'immagine è centrata al suo interno. Il div ha una larghezza impostata del 100% in modo che l'immagine possa centrare correttamente. Per la margin:auto; al lavoro L'immagine deve essere visualizzata come un elemento di tabella con la display:table;

Utilizzando display:table; significa che non c'è bisogno di impostare una larghezza fissa per l'elemento che si desidera centrato.

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