Wie klebe ich ein Bild an den unteren Rand des sichtbaren Bildschirms und zentriere es?

Question

Ich habe eine Website, und ich muss ein Bild am unteren Rand der sichtbaren Seite zentriert haben. Also in jeder Bildschirmgröße wird das Bild immer noch am unteren Rand und zentriert sein.

Answer 1

mit reinem css Sie dies in allen neuen Browsern erreichen

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

und für IE6 können Sie position:absolute; statt fester verwenden. Es wird das Bild auf der Unterseite der Seite positionieren, aber wenn Sie nach oben scrollen, wird das Bild mit der Seite scrollen. leide position: fixed in nicht in IE6 unterstützt

Answer 2

Sie es in ein div legen sollten und dann Ihr Bild vorzustellen, ist 500px breit:

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

Answer 3

alte Frage, aber hier ist die beste Lösung, die ich mit aufkommen. Legen Sie das Bild in ein Container-Div, das Div ist am unteren Rand des Bildschirms positioniert und das Bild ist in ihm zentriert. Das div hat eine eingestellte Breite von 100%, so dass das Bild richtig zentriert werden kann. Für die margin:auto; das Bild zu arbeiten, muss mit der display:table;

Mit display:table; bedeutet, Sie müssen nicht eine feste Breite auf das Element, das Sie wollen zentriert gesetzt als Tabellenelement angezeigt werden.

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