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

Posted 2023-03-05

【中文标题】如何将图像放置在 div 的底部？

【英文标题】：How do I position an image at the bottom of 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 的帮助下找到这个答案之前，我查看了 *** 上的几个答案。这是唯一一个提供了对我有用的答案。他的问题对我来说似乎很清楚。他为什么要这样做真的很重要吗？我认为这只会不必要地填补这个问题。

我第二个，不知道你能说得清楚多少。

【参考方案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 中也是如此。