How do I position an image at the bottom of div

Question

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    lt div class  span8  gt     lt img src   img play-shot1 jpg  class  text-center shadow  gt   lt  div gt    The problem is that the div is nested within other divs that have padding or margins

User · Accepted Answer

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.

User · Answer

Using flexbox   HTML    lt div class  wrapper  gt       lt img src  pikachu gif   gt   lt  div gt    CSS    wrapper       height  300px      width  300px      display  flex      align-items  flex-end      As requested in some comments on another answer  the image can also be horizontally centred with justify-content  center

User · Answer

lt  img style  quot vertical-align  bottom quot  src  quot blah png quot   gt   Works for me  Inside a parallax div as well

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

Examples related to css

Examples related to html

Examples related to alignment