如何在div底部放置一个图像？ [英] How do I position an image at the bottom of div?

问题描述

我想要一个html图片与div标签的底部齐平。

I want an html image to be flush with the bottom of a div tag. I can't seem to find a way to accomplish this.

这是我的HTML：

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

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

The problem is that the div is nested within other divs that have padding or margins.

推荐答案

将相对定位添加到包装div标签，然后将图片绝对定位，如下所示：

Add relative positioning to the wrapping div tag, then absolutely position the image within it like this:

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

Now the image sits at the bottom of the div.

这篇关于如何在div底部放置一个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！