CODEWITHSUNDEEP
htmlcssalignmentcenter
Spencer
Spencer

Reputation: 96

Align an image center, bottom of a responsive div

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

This is the code for the issue as far. I need to position the image with a class of "res-ex" to the bottom of the div class of "banner".

I've tried multiple table-cell and position codes but just can't seem to get it to work.

The design is also responsive.

Upvotes: 1

Views: 9160

Answers (2)

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

Here's the code:

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

You need set position:absolute and display:inline-block (or display:block) for the image and position:relative for its container. Then you set bottom:0 for the image.

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115288

You can use positioning to place the image at the bottom of the div and then use CSS transforms to center it.

.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

Upvotes: 11

Related Questions