I am facing an issue with aligning text consistently in the middle of thumbnails on my website. Regardless of whether the text spans 1, 2, or 3 lines, I want it to always be positioned inline with the center of the thumbnail. I have tried various methods such as setting a fixed height for the text container, using vertical-align: middle, and display: table-cell, but none of them seem to work for me. If anyone has a solution to this problem, I would greatly appreciate it.
HTML
<ul id="container">
<li>
<a href="#">
<img src="http://dummyimage.com/120x80/000/fff" />
<p class="desc">This is the text on 2 lines</p>
</a>
</li>
<li>
<a href="#">
<img src="http://dummyimage.com/120x80/000/fff" />
<p class="desc">This is the text</p>
</a>
</li>
<li>
<a href="#">
<img src="http://dummyimage.com/120x80/000/fff" />
<p class="desc">This is the text going onto 3 lines</p>
</a>
</li>
</ul>
CSS
#container li{float:left;width:230px;margin-right:10px;}
#container li a{position:relative;display:block;}
#container li a img{float:left;}
#container li a .desc{position:absolute;right:0;width:100px}
Link to fiddle: http://jsfiddle.net/Luvq3/1/