css - 将无序列表与图像下方显示的图像和文本垂直对齐？

Question

好的，所以我需要一些帮助来将无序列表与同一元素内的图像和文本垂直对齐。图像应与其正下方的文本垂直对齐。

这是我的代码：

html:

<div id="sidetrans">
<ul>
<li><a data-ftrans="slide" href="slide2.html">iPhone 1&2<img alt="next"      src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3G<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3GS<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 4<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone4S<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone5<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
</ul>
</div>

CSS

#sidetrans {
padding-top:15px;
text-align:left;}

#sidetrans a{
padding:0; }

#sidetrans a img{
 vertical-align: text-bottom;   }

#sidetrans ul li{
display:inline;
list-style: none;}

Answer 1

希望我理解这一点。您想要图像下方的垂直和文本中的所有链接。因此，如果您对 html 进行一些更改，那将是一件好事。将文本放在图像之后，然后放置 display: block; 为图像。

img {
display: block;
}

检查这支笔

Answer 2

删除此行。您不需要这些行。

#sidetrans ul li{
display:inline;
list-style: none;}

请检查这个http://jsbin.com/oqeteh/5/edit