* परफेक्ट * लंबवत छवि संरेखण

Question

मेरे पास निश्चित आकार का एक वर्ग div है और अंदर एक मनमानी आकार छवि रखना चाहता है ताकि यह क्षैतिज और लंबवत दोनों सीएसएस का उपयोग कर केंद्रित हो। क्षैतिज आसान है:

.container { text-align: center } 

ऊर्ध्वाधर के लिए, आम समाधान है:

.container { 
    height: 50px; 
    line-height: 50px; 
} 
img { 
    vertical-align: middle; 
} 

लेकिन इस सही नहीं, फ़ॉन्ट आकार पर निर्भर करता है, छवि के चारों ओर 2-4px भी हो जाएगा काफी नीचे।

मेरी समझ के लिए, ऐसा इसलिए है क्योंकि ऊर्ध्वाधर-संरेखण के लिए उपयोग किया जाने वाला "मध्य" वास्तव में मध्य नहीं है, लेकिन मध्य के करीब के फ़ॉन्ट पर एक विशेष स्थिति है। ए (थोड़ा हैकी) वर्कअराउंड होगा:

container { 
    font-size: 0; 
} 

और यह क्रोम और आई 7 में काम करता है, लेकिन IE8 नहीं। हम सभी फ़ॉन्ट लाइनों को मध्य में एक ही बिंदु बनाने की उम्मीद कर रहे हैं, लेकिन ऐसा लगता है कि ब्राउज़र के आधार पर हिट-एंड-मिस और शायद, फ़ॉन्ट का इस्तेमाल किया जाता है।

एकमात्र समाधान जो मैं सोच सकता हूं, लाइन ऊंचाई को हैक करना, इसे थोड़ा छोटा बनाना, छवि को सही स्थान पर दिखाना, लेकिन यह बेहद नाजुक लगता है। क्या कोई बेहतर समाधान है?

img { 
    display: block; 
    line-height: 0; 
} 

:

Answer 1

पृष्ठभूमि के रूप में अपनी छवि का उपयोग करने के बारे में कैसे? इस तरह आप इसे लगातार हर जगह केंद्रित कर सकते हैं। इन पंक्तियों के साथ कुछ:

margin:5px; 
padding:0; 
background:url(http://dummyimage.com/50) no-repeat center center red; 
height:60px; 
width:60px; 

Answer 2

आप निम्नलिखित की कोशिश की है: http://jsfiddle.net/usvrj/3/

IE8 के बिना उन इस स्क्रीनशॉट उपयोगी हो सकते हैं:

सभी तीन समाधान का एक डेमो यहाँ देखें मैं आमतौर पर इस हैक का उपयोग करता हूं, लेकिन मैंने वास्तव में इसे IE8 में पूरी तरह से चेक नहीं किया है।

Answer 3

यह वास्तव में हैकी है, लेकिन यही वह है जिसे हम यानी 6 दिनों में करते थे।

.container { 
    position: relative; 
} 
img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -12px; // half of whatever the image's height is, assuming 24px 
    margin-left: -12px; // half of whatever the image's width is, assuming 24px 
} 

मुझे इस उदाहरण में कुछ याद आ रही है, लेकिन आपको विचार मिलता है।

Answer 4

यहां एक छोटा जे एस फिडल मैं बना दिया है: http://jsfiddle.net/rachit5/Ge4YH/

मेरा मानना ​​है कि यह आपकी आवश्यकता से मेल खाता है।

HTML:

<div> 
    <img src=""/> 
</div> 

सीएसएस:

div{height:400px;width:400px;position:relative;border:1px solid #000;} 
img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;} 

Answer 5

css3 एक विकल्प है, तो flexbox एक अच्छा काम ऊर्ध्वाधर और क्षैतिज संरेखित पर करता है:

UPDATED FIDDLE

.container { 
    display:flex; 
    align-items: center; /* align vertical */ 
    justify-content: center; /* align horizontal */ 
}