Html 将图像中心与响应div的底部对齐 这里有一些文字 就这样。 /库/images/responsive_ex.png“class=“res ex”>

这是目前为止的问题代码。我需要将带有“res-ex”类的图像定位到div类“banner”的底部

我尝试了多个表格单元格和位置代码，但似乎无法使其正常工作

---

设计也很灵敏。

您可以使用定位将图像放置在div的底部，然后使用CSS变换将其居中

.wrap{
高度：400px；
位置：相对位置；
背景：#f09d09；
}
.包裹img{
显示：块；
最大宽度：100%；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
}

---

您可以使用定位将图像放置在div的底部，然后使用CSS变换将其居中

.wrap{
高度：400px；
位置：相对位置；
背景：#f09d09；
}
.包裹img{
显示：块；
最大宽度：100%；
位置：绝对位置；
底部：0；
左：50%；
转化：translateX（-50%）；
}

以下是代码：

<div id="banner" class="cf">
        <div class="banner container">
            <hr/>
            <p class="banner-text">
            Some text here
            <span class="sub-bt">That's it.</span>
            </p>
            <a href="#" rel="nofollow" class="learn-btn">Learn More</a>

            <img src="<?php echo get_template_directory_uri(); ?>/library/images/responsive_ex.png" class="res-ex">
        </div>
    </div>

您需要为图像设置

position:absolute

和

display:inline block

（或

display:block

），为其容器设置

position:relative

）。 然后为图像设置

bottom:0

。

以下是代码：

<div id="banner" class="cf">
        <div class="banner container">
            <hr/>
            <p class="banner-text">
            Some text here
            <span class="sub-bt">That's it.</span>
            </p>
            <a href="#" rel="nofollow" class="learn-btn">Learn More</a>

            <img src="<?php echo get_template_directory_uri(); ?>/library/images/responsive_ex.png" class="res-ex">
        </div>
    </div>

您需要为图像设置

position:absolute

和

display:inline block

（或

display:block

），为其容器设置

position:relative

）。

---

然后你为图像设置

bottom:0

。

我想这会起作用，但Paulie_D的方法是我首先实现的。谢谢你。这将如何居中？从文章的描述中，我了解到Spencer想要将div放置在容器底部。如果需要居中，那么这就是解决方案：我想这是可行的，但Paulie_D的方法是我首先实现的。谢谢。这将如何居中？从文章的描述中，我了解到Spencer想将div放置在容器底部。如果它需要居中，那么这是解决方案：你将如何使用vertical也居中？魔法在这里：

left:50%；transform:translateX（-50%）；

你能解释一下吗？特别是转换。你怎么让这个垂直居中呢？魔法在这里：

left:50%；transform:translateX（-50%）；

你能解释一下吗？特别是转换。