CSS: comment aligner des images verticalement en bas

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 faire pour aligner les images verticalement en bas? (les images ont des hauteurs différentes)

OriginalL'auteur aeran | 2010-02-24

  1. 8

    Essayer 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 travail jsFiddle

    espère que cela va vous aider.
    Merci.

    OriginalL'auteur Roy Sonasish

  2. 0

    Vous devez vertical-align fois la li et de l'img, et de faire de la li aussi haut que le plus haut de l'image. Et pour la sémantique de souci, merci de supprimer l'inutile travées.

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

li img 
{
    vertical-align: bottom
}
    j'ai essayé, mais les images toujours alignés en haut.
    vertical-align besoins de texte de travail de sorte que vous pourriez faire quelque chose comme ceci: li::after { content: "."; visibility: hidden; }
    ce n'est pas de travail

    OriginalL'auteur Residuum

  3. 0

    Juste mis display: inline-block; pour li éléments:
    exemple de travail

    Bien garder à l'esprit que cela ne fonctionne pas en lte IE7.

    OriginalL'auteur nd_macias