测试代码:
<!DOCTYPE html>
<html>
<head> <style>
.dd {
background-color: gray;
position: relative;
line-height: 120px;
}
.d1 {
font-size: 120px;
}
.d2 {
font-size: 80px;
}
.d3 {
font-size: 40px;
}
.d4 {
font-size: 0px;
}
div {
float: left;
}
div + div {
margin: 0px 5px;
}
</style>
</head>
<body>
<div class="dd d1">
<img style="height:60px;width:100px;background-color:red;vertical-align:middle">
</div>
<div class="dd d2">
<img style="height:60px;width:100px;background-color:red;vertical-align:middle">
</div>
<div class="dd d3">
<img style="height:60px;width:100px;background-color:red;vertical-align:middle">
</div>
<div class="dd d4">
<img style="height:60px;width:100px;background-color:red;vertical-align:middle">
</div>
</body>
</html>
发现没，跟font-size关系很大，vertical-align:middle的原理是：
所以font-size越小，这个对齐线越接近div的中间线。
vertical-align：middle属性见
vertical-align各属性对比