<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
答案 0 :(得分:4)
您可以删除两个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上的工作示例。
希望这有帮助!