Come faccio a bastone un'immagine alla parte inferiore dello schermo visibile, e essere centrato?

Question

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

Answer 1

Utilizzando i 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. Ciò posiziona l'immagine sulla parte inferiore della pagina, ma, come si scorrere verso l'alto, l'immagine scorrerà con la pagina. Purtroppo position:fixed in non supportato in IE6.

Answer 2

Old domanda, ma qui è la soluzione migliore mi è venuta. Si inserisce l'immagine in un div contenitore, il div è posizionato nella parte inferiore dello schermo e l'immagine viene centrata all'interno di esso. Il div ha una larghezza serie di 100% modo che l'immagine possa centrare correttamente. Per la margin:auto; di lavorare l'immagine deve essere visualizzata come un elemento di tabella con la display:table;

Utilizzando mezzi display:table; voi 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>

Answer 3

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