Kısa hikaye:Görüntüler neden dikey olarak "çizgi yüksekliği" ile ortalanmalı ve 2 piksel altında olmalılar?
jsfiddle here. Davranış, Chrome 21, Firefox 15 ve IE9'da sürekli olarak yanlıştır, bu da bana CSS özellikleriyle ilgili bir şeyleri yanlış anladığımı düşündürüyor.
Uzun hikaye: Ben line-height kullanarak dikey bir görüntü ortalamak istiyorum
. Görüntü kabininin yüksekliğini satır yüksekliğine göre ayarladım, tüm öğeler için kenar boşluklarını, dolguları ve kenarlıkları sıfırladım, ancak görüntü, olması gereken 2 pikselin altında. Bu, görüntünün konteynırdan mı yoksa ondan daha büyük mi (bu durumda max-width: 100; max-height: 100%'u küçültmek için kullandığını) olur.
Görüntünün her iki durumda da eşit sayıda piksel vardır. Konteynırdan daha küçük görüntüler için çok fazla umurumda değil, daha büyük resimler için, konteynerin arka planında 2-pikselli bir çizgi görüntünün en üstünde akacak.
<!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>
:
İştekeman olduğunu "dikey hizalama: orta" kural olmadan çeşitli kombinasyonlarınızı denediniz mi? – moopet
Satır içi görüntü ile ilgili genel sorun, bu konuda özel bir şey varsa bakmaya hiç bakmadım. Genellikle görüntüyü görüntülenen bloğa göre ayarlayarak ve bir kenar boşluğu ayarlayarak sorunu atlayabilirim: 0 auto; Ancak bu yöntem, sıvı dikey bir allign (sadece yükseklik ölçümlerini biliyorsanız) almanıza izin vermez. http://jsfiddle.net/8UaUQ/ –