html - How do I center an image vertically within a div that is position:fixed? -
इस सवाल का पहले से ही एक उत्तर है: < / P>
- 6 उत्तर
मैंने एक के माध्यम से देखा है कई ऊर्ध्वाधर केंद्रित तकनीकों में से बहुत सारे हैं, लेकिन कोई भी मेरे लिए काम नहीं कर रहा है - मुख्यतः क्योंकि मैं एक निश्चित स्थित डिवा का उपयोग कर रहा हूं।
& lt; div id = "lightbox" & gt; & Lt; div id = "lightboxImgContainer" & gt; & Lt; img src = "'+ image_href +'" / & gt; & Lt; / div & gt; & Lt; / div & gt; # लाइटबॉक्स {स्थिति: तय; शीर्ष: 0; बाएं: 0; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: #ffffff; text-align: केंद्र; z- सूचकांक: 4; कुछ भी डिस्प्ले मत करो; } #lightboxImgContainer {display: table-cell; ऊर्ध्वाधर- align: मध्यम; अधिकतम ऊँचाई: 100%; अधिकतम-चौड़ाई: 100%; text-align: केंद्र; } # लाइटबॉक्स आईएमजी {अधिकतम-ऊंचाई: 100%; अधिकतम-चौड़ाई: 100%; }
इसके अलावा, क्या मैं एकमात्र व्यक्ति हूँ जो सोचता है कि यह एक मजाक है जो ऊर्ध्वाधर संरेखण क्षैतिज संरेखण के समान सरल नहीं है? मैंने इस पर बहुत ज्यादा समय बिताया है जो एक सामान्य कार्य होना चाहिए।
सबसे आसान इसे पृष्ठभूमि छवि के रूप में सेट करना है:
#lightbox {background: url (myimage.jpg) नहीं-दोहराने केंद्र केंद्र}
वैकल्पिक रूप से, आप flexbox का उपयोग कर सकते हैं यदि आप
#lightbox {display: flex; } # लाइटबॉक्स आईएमजी {align-items: center; }
Comments
Post a Comment