Truyện ngắn:Tại sao hình ảnh được căn giữa theo chiều dọc với `dòng-chiều cao 'được đặt ở vị trí dưới 2 pixel bên dưới?
jsfiddle here. Hành vi này liên tục sai trong Chrome 21, Firefox 15 và IE9, điều này khiến tôi nghĩ rằng tôi hiểu nhầm về thông số CSS. Câu chuyện
dài:
Tôi muốn tập trung một hình ảnh theo chiều dọc sử dụng line-height. Tôi đã đặt chiều cao của vùng chứa hình ảnh bằng với chiều cao dòng, tôi đã đặt lại lề, phần đệm và đường viền cho tất cả các phần tử, nhưng hình ảnh có độ phân giải thấp hơn 2 pixel. Điều này xảy ra cho dù hình ảnh nhỏ hơn vùng chứa hay lớn hơn hình ảnh (trong trường hợp này tôi đã sử dụng max-width: 100; max-height: 100% để giảm kích thước hình ảnh xuống).
Hình ảnh có số lượng pixel đều trong cả hai trường hợp. Tôi sẽ không quan tâm nhiều đến hình ảnh nhỏ hơn bình chứa, nhưng đối với hình ảnh lớn hơn, đường kẻ 2 pixel từ nền thùng chứa sẽ chảy qua đầu hình ảnh.
<!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>
bạn đã thử các kết hợp khác nhau của mình mà không có quy tắc "thẳng đứng: trung bình" chưa? – moopet
Sự cố thường gặp với hình ảnh nội tuyến mà tôi chưa bao giờ quan tâm để tìm kiếm nếu có điều gì đó trong thông số kỹ thuật về nó. Thông thường tôi có thể bỏ qua vấn đề bằng cách thiết lập hình ảnh để hiển thị khối và thiết lập một lề: 0 tự động ;. Nhưng phương pháp này không cho phép bạn có một allign dọc chất lỏng (chỉ khi bạn biết các phép đo chiều cao). http://jsfiddle.net/8UaUQ/ –