一张图解析如何让img垂直居中对齐

测试代码:

<!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各属性对比