css - <li> mis-alignment depending on text -

i trying have horiztonal li elements create these card effects.

however, seems amount of text inside of them throwing alignment off (some higher other). example, 3rd box has more text other 2 it's placed higher others.

li {   position: relative;   display: inline-block;   width: 282px;   height: 368px;   background: url("../img/comedians/comedian-card.png");   padding: 20px;   margin: 10px; } 

how can make them align irrespective of text inside?

http://f.cl.ly/items/2e2i2z0x0g3m2d1o2f0t/stackoverflow.png

try using vertical-align, eg: vertical-align: middle. i'll try come demo in second.

here's demo: http://jsfiddle.net/wmb8t/1/

css

li{     display: inline-block;     width: 120px;     border: 1px solid black;     margin: 5px;     vertical-align: top; }