如何将图片定位在div底部？

Question

我想让一个html图片与div标签的底部对齐。我似乎找不到实现这一点的方法。

这是我的HTML代码：

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

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

- Dustin Lee

---

将图像定位于div底部，通过将此CSS属性应用于图像：position:absolute; bottom:0 - Eric Leschinski

我不确定这个问题是否应该被关闭。在用谷歌搜索之前，我已经查看了堆栈溢出上的一些答案，但只有这一个对我有效。他的问题对我来说似乎非常清晰明了。他为什么想要这样做真的很重要吗？我认为这只会不必要地增加问题的长度。 - bonzo46

我赞同，不确定还能更清楚些什么。 - Mankind1023

Answer 1

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

CSS：

```css .wrapper { position: relative; }

.wrapper img { position: absolute; } ```

.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 的底部。

- Matt Lambert

---

使用这种方法，是否可以将其居中对齐？text-align:center在绝对定位后不起作用。 - relipse

@relipse，如果有人想知道：margin-left和margin-right：auto，left和right：0。 - user6225298

如果我需要将多个图像叠放在彼此之上，该怎么办？ - Abilash Arjunan

Answer 2

使用flexbox：

HTML：

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

CSS：

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

根据其他回答中一些评论的要求，该图片也可以通过 justify-content: center; 属性水平居中。

- ajrussellaudio

---

谢谢！这种方法即使没有固定的高度也能起作用。 - Code Tree

Answer 3

.parent :"display: inline-flex;"

.child: "align-self: self-end;"

它和我一起工作。

- Khanh Pham Gia

Answer 4

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

对我来说可以。在视差div中也可以。

- atomkey