CSS：如何使图像垂直底部

我有这样的代码：CSS：如何使图像垂直底部

<ol><li><a href=""><span><img src="/images/sized/images/uploads/books/book_1.jpg" width="100" height="165" alt="" /></span> 
    </a> </li> 
<li><a href=""><span><img src="/images/sized/images/uploads/books/book_2.jpg" width="100" height="130" alt="" /></span> 
    </a> </li></ol>

如何对齐图像垂直底部？（图像有各种高度）

来源

2010-02-24 aeran

您需要垂直对齐li和img，并使li与最高图像一样高。为了语义的缘故，请删除不必要的跨度。

li 
{ 
    float: left; 
    width: 100px; 
    height: 165px; 
    vertical-align: bottom 
} 

li img 
{ 
    vertical-align: bottom 
}

来源

2010-02-24 09:24:36 Residuum

我试过了，但图像仍然对齐顶部。 – aeran

'vertical-align'需要文本才能工作，所以你可以这样做：'li :: after { content：“。”; 知名度：隐藏; }' – Wavesailor

这不起作用 –

只需设置display: inline-block;为li元素： working example

虽然记住，它不会在LTE IE7工作。

来源

2013-03-18 07:49:07

试试这个

的CSS

li{ 
    width:300px; 
    height:300px; 
    background:yellow; 
    text-align:center; 
    list-style-type:none; 
    margin-bottom:10px; 
    display:table-cell; 
    vertical-align:bottom; 
}

HTML

<ul> 
    <li><img src="http://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-250x250.jpg" width="250" height="250" /></li> 
</ul>

工作示例jsFiddle

希望这会帮助你。谢谢。

来源

2013-03-18 08:20:14

CSS：如何使图像垂直底部

回答

相关问题