Выровнять по вертикали несколько строк рядом с плавающим изображением

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>

потому что я хотел сделать большую кликабельную область якоря, поэтому я должен бросить все внутри якоряПроблема в том, что мой заголовок может состоять из нескольких строк.как я могу на самом деле вертикально выровнять по центру изображения и не допустить перехода следующей строки заголовка под изображением.

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>

, а затем использовать следующий CSS для этого span:

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

Рабочий пример для jsFiddle .

Надеюсь, это поможет!