對齊圖像中心和響應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>

這是到目前為止的代碼。 我需要使用“ res-ex”類將圖像定位到“ banner”的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演示

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 。