Dlaczego pierwszy i ostatni element inline-block zajmuje wysokość na dole, a nie na górze?

Dlaczego pierwszy i ostatni element inline-block zajmuje wysokość na dole, a nie na górze?

Przykład na żywo : http://dabblet.com/gist/3526764

HTML

<a href="#" class="slider-previous">previous</a>
<img src="http://lorempixel.com/81/61/city/1" alt="">
<img src="http://lorempixel.com/81/61/city/2" alt="">
<img src="http://lorempixel.com/81/61/city/3" alt="">
<img src="http://lorempixel.com/81/61/city/4" alt="">
<img src="http://lorempixel.com/81/61/city/5" alt="">
<img src="http://lorempixel.com/81/61/city/6" alt="">
<img src="http://lorempixel.com/81/61/city/7" alt="">
<img src="http://lorempixel.com/81/61/city/8" alt="">
<a href="#" class="slider-next">Next</a>

CSS

img {display:inline-block;}
.slider-previous {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block;}
.slider-next {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block; }

Chcę, aby strzałka była wyrównana w pionie do obrazów. czy nie jest to możliwe bez ujemnego margin-top lub float?