लघु कहानी:छवियों को 'रेखा-ऊंचाई' के साथ लंबवत केंद्रित क्यों किया गया है, जहां वे 2 पिक्सेल नीचे स्थित हैं?
jsfiddle here। क्रोम 21, फ़ायरफ़ॉक्स 15 और आईई 9 में व्यवहार लगातार गलत है, जो मुझे लगता है कि मैं सीएसएस स्पेक के बारे में कुछ गलत समझ रहा हूं।
लंबे समय तक कहानी:
मैं खड़ी एक छवि केंद्र के लिए line-height का उपयोग कर चाहते हैं। मैंने लाइन-ऊंचाई के बराबर छवि कंटेनर की ऊंचाई निर्धारित की है, मैंने सभी तत्वों के लिए मार्जिन, पैडिंग और सीमाएं रीसेट कर दी हैं, फिर भी छवि 2 पिक्सेल नीचे है जहां यह होना चाहिए। ऐसा होता है कि छवि कंटेनर से छोटी है, या उससे बड़ी है (जिस स्थिति में मैंने इसे आकार देने के लिए max-width: 100; max-height: 100% का उपयोग किया था)।
छवि में दोनों मामलों में पिक्सल की संख्या भी है। मैं कंटेनर से छोटी छवियों के लिए इतना अधिक परवाह नहीं करता, लेकिन बड़ी छवियों के लिए, कंटेनर पृष्ठभूमि से 2-पिक्सेल लाइन छवि के शीर्ष पर खून बहती है।
<!DOCTYPE html>
<html lang="en">
<head>
<title>Images centered vertically with line-height have center miscalculated by 2 pixels</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0px solid cyan; } /* reset all margins, paddings and borders */
html {
font-size: 16px;
line-height: normal;
}
body {
line-height: 100%;
background: gray;
}
.img-wrapper-center {
width: 400px;
height: 200px; /* necessary, besides line-height, if images are taller than it */
line-height: 200px; /* must be equal to line-height */
text-align: center;
background: white;
}
.img-wrapper-center img {
vertical-align: middle;
/* Comment the two rules below. The first image will still be mis-aligned by two pixels, but the second will not. */
max-width: 100%; max-height: 100%; /* force scaling down large images */
}
</style>
</head>
<body>
<div class="img-wrapper-center" id="div1">
<img src="http://gravatar.com/avatar" id="img1"/> <!-- 80x80 -->
</div>
<div class="img-wrapper-center" id="div2" style="background: green">
<img src="http://www.w3.org/html/logo/img/class-header-semantics.jpg" id="img2" /> <!-- 495x370 -->
</div>
<p>
Note how the second image is misaligned down by two pixels.
The first one is mis-aligned the same way. Sizes and coordinates are below.
</p>
<script>
document.writeln('div1 top: ' + document.getElementById('div1').offsetTop + '<br/>');
document.writeln('image 1 height: ' + document.getElementById('img1').offsetHeight + '<br/>');
document.writeln('div1 height: ' + (document.getElementById('div1').offsetHeight) + '<br/>');
document.writeln('image 1 top should be at: ' + (document.getElementById('div1').offsetHeight - document.getElementById('img1').height)/2 + '<br/>');
document.writeln('image 1 top actually is at: ' + document.getElementById('img1').offsetTop + '<br/>');
document.writeln('div2 top: ' + document.getElementById('div2').offsetTop + '<br/>');
document.writeln('img2 top: ' + document.getElementById('img2').offsetTop + '<br/>');
</script>
</body>
</html>
:
यहाँ बेला है क्या आपने "लंबवत-संरेखण: मध्य" नियम के बिना अपने विभिन्न संयोजनों की कोशिश की है? – moopet
इनलाइन छवि के साथ आम समस्या जिसे मैंने कभी भी देखने की परवाह नहीं की है यदि इसके बारे में कुछ भी है। आमतौर पर मैं ब्लॉक को प्रदर्शित करने के लिए छवि सेट करके समस्या को बाईपास कर सकता हूं और मार्जिन सेट कर सकता हूं: 0 auto ;. लेकिन यह विधि आपको तरल पदार्थ लंबवत संकेत देने की अनुमति नहीं देती है (केवल तभी जब आप ऊंचाई माप जानते हैं)। http://jsfiddle.net/8UaUQ/ –