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

check this pen

Answer 2

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

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

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

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

2 个答案: