html - 确保我的缩略图描述始终与缩略图的中间对齐？

Question

我有一组缩略图，右边有一小段描述，我想做的是确保无论是 1 行文本、2 行还是 3 行文本始终位于一致的位置与缩略图的中间内联？我试过给 .desc 一个与缩略图相同的高度，我试过 vertical-align:middle，我试过 display:table cell 但我想不出任何有用的东西(无论如何对我来说)。如果有人能提供一个很好的解决方案。

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}​

fiddle 链接:http://jsfiddle.net/Luvq3/1/

Answer 1

HTML

 <ul id="container">
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text</p></div>           
            </a>
        </li>     
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the text on two lines lol</p></div>           
            </a>
        </li>      
    </ul>​​​​​​​​​​​​​​

CSS:

#container li{float:left;width:230px;margin-right:10px;}

.column {display:inline-block; vertical-align:middle}
.rightcol {width:100px;}​