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

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

这是我的密码：

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>

---

希望我能正确理解这一点。您希望在图片下方的垂直和文本中显示所有链接。因此，如果您在html中做一些更改，这将是很好的。将文本放在图像后，然后将显示：块；为了形象

img {
display: block;
}

---

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

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

---

请检查此项

确保OP仍然希望列表项显示为内联：。如果他希望列表显示为内联，请更新笔。但如果没有，则删除float:left；从css。你能修复断开的链接吗？

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