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?

css
0
Jitendra Vyas 30 sierpień 2012, 15:36

2 odpowiedzi

Najlepsza odpowiedź

Wynika to z braku vertical-align zdefiniowanego dla obrazów

Spróbuj dodać

img {
   vertical-align: bottom
}

Przykładowy dabblet: http://dabblet.com/gist/3526905

3
Fabrizio Calderan 30 sierpień 2012, 15:39
.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}

Powinien załatwić sprawę?

0
Xun Yang 30 sierpień 2012, 15:59