Come si posiziona un'immagine nella parte inferiore di div?

Question

Desidero che un'immagine html sia allineata con la parte inferiore di un tag div. Non riesco a trovare un modo per realizzare questo.

Ecco il mio HTML:

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

Il problema è che il div è nidificato all'interno di altri div che hanno imbottitura o margini.

Answer 1

Aggiungi il posizionamento relativo al tag involucro div, quindi assolutamente posizionare l'immagine all'interno di esso in questo modo:

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> 

Ora l'immagine si siede al il fondo del div