मैं दृश्यमान स्क्रीन के नीचे एक छवि कैसे चिपका सकता हूं, और केंद्रित हो सकता हूं?

Question

मेरे पास एक वेबसाइट है, और मुझे दृश्य पृष्ठ के नीचे केंद्रित एक छवि की आवश्यकता है। तो किसी भी स्क्रीन आकार में, छवि अभी भी नीचे और केंद्रित होगी।

Answer 1

का उपयोग कर शुद्ध सीएसएस आप सभी नए ब्राउज़रों

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

और IE6 के लिए में इस लक्ष्य को हासिल कर सकते हैं position:absolute; बजाय तय उपयोग कर सकते हैं। यह पृष्ठ के निचले हिस्से में छवि को स्थान देगा, लेकिन जब आप स्क्रॉल करेंगे तो छवि पृष्ठ के साथ स्क्रॉल होगी। दुर्भाग्य से स्थिति: नहीं में तय IE6

Answer 2

में समर्थित आप इसे एक div में डाल दिया जाना चाहिए और उसके बाद, अपनी छवि की कल्पना 500px चौड़ा है:

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

Answer 3

पुराना सवाल लेकिन यहाँ सबसे अच्छा समाधान मैं के साथ आया है। छवि को एक कंटेनर div में रखें, div स्क्रीन के नीचे स्थित है और छवि इसके अंदर केंद्रित है। Div में 100% की सेट चौड़ाई है ताकि छवि ठीक से केंद्र हो सके। के लिए छवि काम करने के लिए margin:auto;display:table;

का उपयोग के साथ एक मेज तत्व के रूप में प्रदर्शित किया जाना चाहिए display:table; मतलब है कि आप तत्व आप केंद्रित चाहते हैं कि करने के लिए एक निश्चित चौड़ाई सेट करने के लिए नहीं है।

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