How do I get the comment count to appear as text over the comment bubble image?

As may be able to see in this jsfiddle example, I am trying to ge开发者_运维知识库t the count of the number of comments (12 in the example) to appear as text over the comment bubble image:

http://jsfiddle.net/c337Z/

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;
}

The idea is for the user to be able to see how many comments exist and then click on the bubble image to be redirected to the comments page.

However, the text is appearing off to the left of the image rather than dead center in the middle of the image.

What do I need to do to get the text to appear over the center of the image?

Nesting a DIV inside an A is not valid markup.

Try this...

Demo: 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;
}

what about this > http://jsfiddle.net/lipelip/c337Z/15/

You can customize/remove the gradient on the counter, and set the value of the counter using innerHTML of "counterField" See this example http://jsfiddle.net/3czxB/2/

<div id="noti_Container">
    <img height="48" width="48" src="http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/kopetestatusmessage.png" />
    <div id="counterField" class="noti_bubble">1000</div>
</div>

And the CSS that makes it work/pretty (not great in IE)

        #noti_Container {
            position:relative;
            border:1px solid blue;
            width:48px;
            height:48px;
        }

       .noti_bubble {
            position:absolute;
            top: 10px;
            right:10px;
            padding:1px 2px 1px 2px;
            background: rgb(255,175,75); /* Old browsers */
            background: -moz-linear-gradient(top, rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom, rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
            border: 1px solid gray;
            color:white;
            font-weight:bold;
            font-size:0.65em;

            border-radius:30px;
            box-shadow:1px 1px 1px gray;
        }

I think this is what you are looking for: http://jsfiddle.net/75JsT/