Ошибка вертикального центрирования изображения - больше места вверху, чем внизу

Эта скрипка демонстрирует проблему с центрированием изображения внутри якоря (insidde the div). Это очень странно для меня - почему в первом изображении больше пространства выше, чем ниже. Может ли кто-нибудь помочь мне исправить это?

Код HTML:

<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;
}