css - 为什么第一个和最后一个内联块项目的高度在底部而不是顶部？

Question

为什么第一个和最后一个内联块项目的高度在底部而不是顶部？

现场示例：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; }

我想让箭头与图像垂直对齐。margin-top没有否定或就不可能float吗？

Answer 1

这是由于缺少vertical-align图像的定义

尝试添加

img {
   vertical-align: bottom
}

dabblet 示例：http: //dabblet.com/gist/3526905

Answer 2

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

应该做的伎俩？