Vertically align multiple lines beside a floated image
<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>
because i wanted to make a large clickable anchor area, so i have to throw everything inside an anchor. problem is because my title may be multiple lines. how could i act开发者_StackOverflow社区ually vertically align to center of the image and preventing the next line of title from going below of the image.
demo link: jsfiddle.net/9wJRG/3
You can drop the two span
elements and replace them with a single span
element like this:
<li>
<a href="viewBook.php?bookId=<?=$bookId?>">
<img src="http://dummyimage.com/50x75/000/fff"/>
<span id="text">
<?=$count?>. <?=$title?>
</span>
</a>
</li>
and then use the following CSS for that span
:
#text {
display: table-cell;
width: 100px;
height: 75px;
padding: 10px;
vertical-align: middle;
}
Working example on jsFiddle.
Hope this helps !
精彩评论