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

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

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

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    lt div class  div-wrapper  gt       lt img src  blah png   gt   lt  div gt    Now the image sits at the bottom of the div

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

Examples related to css

Examples related to html

Examples related to alignment