图像垂直居中错误 - 比上面的空间更大

Question

这个fiddle证明了在锚点内居中图像的问题（insidde div）。这对我来说很奇怪 - 为什么第一张图片的空间比下面的空间大。有人可以帮我解决这个问题吗？

HTML code：

<div id="parent">
    <ul class="other-images">
        <li>
            <a href="#">
                <img src="http://www.abc.net.au/radionational/image/4220698-3x2-700x467.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://us.123rf.com/400wm/400/400/malopes/malopes0901/malopes090100089/4185805-beatiful-spring-landscape-with-grass-and-sky--portrait-orientation.jpg">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="http://resources2.news.com.au/images/2012/09/09/1226468/512770-images.jpg">
            </a>
        </li>
    </ul>
</div>

CSS代码：

#parent{
    background: gray;
    width: 500px;
    height: 500px;
    padding: 10px;
}

.other-images{
    display: block;
    padding: 0;
    margin: 0 -2%;
    overflow: hidden;
}

.other-images > li:nth-of-type(8n+1) {
    clear: both;
}

.other-images > li:nth-of-type(n) {
    clear: none;
}

.other-images > li {
    display: inline-block;
    height: 35px;
    float: left;
    margin: 0 2% 4%;
    width: 9%;
}

.other-images > li > a {
    background: red;
    display: inline-block;
    border: 1px solid #aaa;
    height: 100%;
    width: 100%;
    line-height: 35px;
    text-align: center;
}

img{
    max-width:100%;
    max-height:100%;
    display: inline-block;
    vertical-align: middle;
}

Answer 1

垂直对齐有多种解决方案。其中一个就是你应用的那个，使用一个行高并给你的图像vertical-align：middle 第二种方法是使用display来制作锚：table和image有一个display：table-cell with vertical-align middle。

可以找到更有用的信息here