在浮动图像旁边垂直对齐多条线

Question

<li> 
    <a href="viewBook.php?bookId=<?=$bookId?>"> 
         <img style="float:left; clear:left; padding-left:10px; width:50px; height:75px;" src="http://dummyimage.com/50x75/000/fff" / >
         <span style="line-height:75px; padding-left:5px; color:grey;"><?=$count?>.</span>
         <span style=""><?=$title?></span>
     </a>
</li>

因为我想制作一个大的可点击锚点区域，所以我必须把所有东西都放在一个锚点内。 问题是因为我的标题可能是多行。 我怎么能真正垂直对齐到图像的中心并防止下一行标题从图像下方移动。

演示链接：jsfiddle.net/9wJRG/3

Answer 1

您可以删除两个span元素并将它们替换为单个span元素，如下所示：

<li> 
    <a href="viewBook.php?bookId=<?=$bookId?>"> 
        <img src="http://dummyimage.com/50x75/000/fff"/>
        <span id="text">
            <?=$count?>. <?=$title?>
        </span>
    </a>
</li>

然后对该span使用以下 CSS ：

#text {
    display: table-cell;
    width: 100px;
    height: 75px;
    padding: 10px;
    vertical-align: middle;
}

jsFiddle上的工作示例。

希望这可以帮助 ！