CSS: comment aligner les images en bas verticalement

Question

J'ai ce code:

<ol><li><a href=""><span><img src="/images/sized/images/uploads/books/book_1.jpg" width="100" height="165" alt="" /></span> 
    </a> </li> 
<li><a href=""><span><img src="/images/sized/images/uploads/books/book_2.jpg" width="100" height="130" alt="" /></span> 
    </a> </li></ol> 

Comment aligner les images de fond verticalement? (les images ont différentes hauteurs)

Answer 1

Vous devez aligner verticalement li et img, et rendre le li aussi élevé que l'image la plus grande. Et pour l'amour de la sémantique, s'il vous plaît supprimer les travées inutiles.

li 
{ 
    float: left; 
    width: 100px; 
    height: 165px; 
    vertical-align: bottom 
} 

li img 
{ 
    vertical-align: bottom 
} 

Answer 2

Il suffit de définir display: inline-block; pour li éléments: working example

Bien garder à l'esprit que cela ne fonctionnera pas dans lte IE7.

Answer 3

Essayez cette

Css

li{ 
    width:300px; 
    height:300px; 
    background:yellow; 
    text-align:center; 
    list-style-type:none; 
    margin-bottom:10px; 
    display:table-cell; 
    vertical-align:bottom; 
} 

html

<ul> 
    <li><img src="http://2.imimg.com/data2/LQ/QV/MY-/teddy-small-size-250x250.jpg" width="250" height="250" /></li> 
</ul> 

Exemple de jsFiddle

espère que cela vous aidera. Merci.