为什么图像垂直居中，`line-height'位于应该位于下方2像素处？ [英] Why are images centered vertically with `line-height` positioned 2 pixels below where they should be?
问题描述
短篇小说：
jsfiddle这里。这种行为在Chrome 21，Firefox 15和IE9中总是出现错误，这让我觉得我对CSS规范有些误解。
jsfiddle here. The behavior is consistently wrong in Chrome 21, Firefox 15 and IE9, which makes me think I'm misunderstanding something about the CSS spec.
长期故事： / strong>
Longer story:
我想使用line-height垂直居中。我已经设置图像容器的高度等于行高，我已经重置边距，paddings和所有元素的边框，但图像低于应该是2像素。无论图片是小于容器，还是大于容器（在这种情况下，我使用 max-width：100; max-height：100％ ）。
I want to center an image vertically using line-height. I've set the height of the image container equal to the line-height, I've reset margins, paddings and borders for all elements, yet the image is 2 pixels below where it should be. This happens whether the image is smaller than the container, or larger than it (in which case I used max-width: 100; max-height: 100% to size it down).
在这两种情况下，图像具有偶数像素。对于小于容器的图片，我不会太在意，但是对于更大的图片，来自容器背景的2像素线将在图片顶部流出。
The image has an even number of pixels in both cases. I wouldn't care that much for images smaller than the container, but for images that are larger, a 2-pixel line from the container background will bleed through at the top of the image.
<!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>
推荐答案
容器 div 元素的字体大小
因为图像显示为内联元素，所以它们受容器 div 中的文本的影响。零 font-size 修正此问题：
You have to set zero font-size for container div elements.
Because images are displayed as inline elements they are affected by text in container div. Zero font-size fixes this:
.img-wrapper-center
{
font-size:0;
}
这里是小提琴：http://jsfiddle.net/bZBsR/
这篇关于为什么图像垂直居中，`line-height'位于应该位于下方2像素处？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
