Question

What should I do to make my thumbnails in the list view aligned vertically?

The list view items are generated dynamically from database, so the height of the list item will be vary, so adding (padding/margin) top attributes in css is out of question.

Here are my sample codes:

<ul>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Long description here (white-space: normal)</p></li>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Longer description here (white-space: normal)</p></li>
<li><img src='The Thumbnail Image' /><h3>the list heading</h3><p>Longest description here (white-space: normal)</p></li>
</ul>

Maybe this will give more clear view about my case: http://jsfiddle.net/QdatL/

Any help are greatly appreciated.

Best Regards,
Alvin.

Answer 1

I’ve added this code:

li {
   position: relative;   
}

img {
   position: absolute;
   top: 50%;
   left: 5px;
   margin-top: -40px; /* image height/2 */
}

and it worked!

DEMO