如何将图像放置在 div 的底部？答案

【问题标题】：How do I position an image at the bottom of div?如何将图像放置在 div 的底部？
【发布时间】：2013-07-29 20:25:01
【问题描述】：

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

这是我的 HTML：

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

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

【问题讨论】：

通过将此 CSS 属性应用于图像将图像定位到 div 的底部：position:absolute; bottom:0
我不确定这个问题是否应该被关闭。在 Google 的帮助下找到这个答案之前，我查看了 stackoverflow 上的几个答案。这是唯一一个提供了对我有用的答案。他的问题对我来说似乎很清楚。他为什么要这样做真的很重要吗？我认为这只会不必要地填补这个问题。
我第二个，不知道你能说得清楚多少。

标签： css html alignment

【解决方案1】：

为包装的 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 的底部。

【讨论】：

使用这个方法可以居中对齐吗？ text-align: center 在这个绝对定位之后不起作用
@relipse，如果有人也想知道：margin-left & margin-right : auto, left & right : 0.
如果我必须将多个图像堆叠在另一个之上怎么办？

【解决方案2】：

使用弹性框：

HTML：

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

CSS：

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

根据某些 cmets 在另一个答案中的要求，图像也可以水平居中justify-content: center;

【讨论】：

【解决方案3】：

< img style="vertical-align: bottom" src="blah.png" >

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

【讨论】：