Comment positionner une image au bas de la div?

Question

Je veux qu'une image html soit alignée avec le bas d'une balise div. Je n'arrive pas à trouver un moyen d'y parvenir.

Voici mon HTML:

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

Le problème est que la div est imbriquée dans d'autres div ayant un remplissage ou des marges.

Answer 1

Ajoutez un positionnement relatif à la balise wrapping div, puis positionnez absolument l'image à l'intérieur comme suit:

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>

Maintenant, l'image se trouve au bas de la div.