Question

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

<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标签以实现它。

这是updated Fiddle

在CSS中添加这个img子句

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

Answer 3

如果它有某种botton边缘，那么你可以将它用作：

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

确保图像位于边缘而不是中心的某处。如果你想要在中心。然后删除右：0px; 但是你可以使用它：

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

所有主流浏览器都支持此功能！

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

3 个答案: