How do I position an image at the bottom of div?

css html alignment
Dustin Lee picture Dustin Lee · Jul 29, 2013 · Viewed 149.6k times · Source

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.

Here is my HTML:

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

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

Answer

Matt Lambert picture Matt Lambert · Jul 30, 2013

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>

Now the image sits at the bottom of the div.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More