6
짧은 이야기 :왜 이미지가`line-height`가 수직으로 가운데에 놓이게 될까요?
jsfiddle here. 문제는 Chrome 21, Firefox 15 및 IE9에서 일관되게 잘못되었습니다. 따라서 CSS 사양에 대한 잘못된 이해를하게됩니다.
긴 이야기 : I 라인 높이를 사용하여 수직 이미지의 중심을 할
. 이미지 컨테이너의 높이를 라인 높이와 같게 설정했습니다. 모든 요소의 여백, 여백 및 테두리를 다시 설정했지만 이미지는 반드시 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>
:
여기이 바이올린입니다 "vertical-align : middle"규칙없이 다양한 조합을 시도해 보셨습니까? – moopet
인라인 이미지와 관련된 일반적인 문제는 사양에 뭔가가있을 때 나는 결코 보지 못했습니다. 일반적으로 이미지를 블록을 표시하도록 설정하고 여백을 설정하여 문제를 피할 수 있습니다 : 0 자동; 그러나이 방법은 유동적 인 수직 정렬을 허용하지 않습니다 (높이 측정을 알고있는 경우에만). http://jsfiddle.net/8UaUQ/ –