正如在此 jsfiddle 示例中所看到的,我正在尝试获取评论数量(示例中为 12)以文本形式显示在评论气泡图像上:
HTML:
<ul id="top">
<li><a href="/comments"><div id="commentlink">12</div></a></li>
</ul>
CSS:
#commentlink
{
background: url("http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/kopetestatusmessage.png") no-repeat 0 0;
width:128px;
height:128px;
}
这个想法是让用户能够看到有多少评论,然后单击气泡图像以重定向到评论页面。
但是,文本出现在图像的左侧,而不是图像中间的正中心。
我需要做什么才能让文本出现在图像的中心?
最佳答案
在 A
内嵌套 DIV
不是有效的标记。
试试这个...
演示:http://jsfiddle.net/wdm954/c337Z/5/
HTML...
<ul id="top">
<li>
<a href="/comments" class="commentlink">12</a>
</li>
</ul>
CSS...
.commentlink {
display: block;
background: url("http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/kopetestatusmessage.png") no-repeat 0 0;
width:128px;
height:128px;
text-align: center;
padding-top: 40px;
}
关于html - 如何让评论计数在评论气泡图像上显示为文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6046265/