50

我希望 html 图像与 div 标签的底部齐平。我似乎无法找到实现这一目标的方法。

这是我的 HTML:

<div class="span8">
  <img src="/img/play-shot1.jpg" class="text-center shadow">
</div>

问题是 div 嵌套在其他具有填充或边距的 div 中。

4

3 回答 3

81

将相对定位添加到包装 div 标签,然后将图像绝对定位在其中,如下所示:

CSS:

.div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
}

.div-wrapper img {
    position: absolute;
    left: 0;
    bottom: 0;
}

HTML:

<div class="div-wrapper">
    <img src="blah.png"/>
</div>

现在图像位于 div 的底部。

于 2013-07-29T22:20:28.940 回答
4

使用弹性盒:

HTML:

<div class="wrapper">
    <img src="pikachu.gif"/>
</div>

CSS:

.wrapper {
    height: 300px;
    width: 300px;
    display: flex;
    align-items: flex-end;
}

根据对另一个答案的一些评论中的要求,图像也可以水平居中justify-content: center;

于 2020-05-19T07:19:13.557 回答
2
< img style="vertical-align: bottom" src="blah.png" >

为我工作。在视差 div 内部也是如此。

于 2020-09-13T05:49:19.023 回答