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

【问题标题】：Vertically align Unordered List with images and text that is displayed below the image?将无序列表与图像下方显示的图像和文本垂直对齐？
【发布时间】：2013-03-21 21:12:21
【问题描述】：

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

这是我的代码：

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;}

【问题讨论】：

标签： css image html-lists vertical-alignment

【解决方案1】：

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

img {
display: block;
}

check this pen

【讨论】：

很确定 OP 仍然希望列表项内联显示：jsfiddle.net/5kUfg。
更新了笔，如果他希望列表显示为内联。但如果不这样做，则删除 float:left;来自 CSS。
你能修复损坏的链接吗？

【解决方案2】：

删除此行。你不需要这行。

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

请查看http://jsbin.com/oqeteh/5/edit

【讨论】：