对齐图像中心，响应div的底部

Question

<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>

到目前为止，这是该问题的代码。我需要用一类＆＃34; res-ex＆＃34;来定位图像。在＆＃34; banner＆＃34;。

的div类的底部

我尝试了多个表格单元格和位置代码，但似乎无法让它发挥作用。

设计也很敏感。

Answer 1

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

.wrap {
    height: 400px;
    position: relative;
    background: #f09d09;
}

.wrap img{
    display: block;
    max-width: 100%;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    
}

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" alt=""/>
</div>

JSFiddle Demo

Answer 2

以下是代码：

.res-ex {
    position:absolute;
    min-width:100px;
    min-height:100px;
    bottom:0;
    display:inline-block;
}
.banner.container {
    position:relative;
}

您需要为图片设置position:absolute和display:inline-block（或display:block），并为其容器设置position:relative。 然后为图像设置bottom:0。