html - 如何在 li 元素的底部对齐图像？

Question

如何在 li 元素的底部对齐图像。在我的情况下，我需要微笑与正方形的底部边缘对齐。

http://jsfiddle.net/Jvgrz/

<ul>
    <li>a</li>
        <li>b</li>
        <li><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></li>
</ul>


li {
    position: relative;
    width:100px;
    height:100px;
    border: 1px solid red;

}

Answer 1

您可以使用 css 使图像具有绝对位置.... 像这样。

li img { position: absolute; bottom: 0; }

Answer 2

您可以简单地为您的 img 标签设置绝对位置来实现它。

这是更新的小提琴

在 CSS 中添加这个 img 子句

img {
    position: absolute;
    bottom: 0px;
}

Answer 3

如果它是某种底部边缘，那么您可以将其用作：

img {
position: absolute;
bottom: 0px;
right: 0px;
}  

以确保图像位于边缘而不是中心的某个位置。如果你想在中心。然后删除 right:0px; 但是你可以使用这个：

img {
 align: center|top|left|right;
 }

因为所有主要浏览器都支持它！