Question

HTML

<div class="leave-comment">
  <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8"><span class="comment-bubble"></span>Leave a comment for Example Video 8!</a>
</div>

CSS

.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}

.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
  }

Here is the JS Fiddle: http://jsfiddle.net/CeZLy/

I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can’t set a fixed width on the a element. Can someone help me out with this?

NOTE: Sorry if I wasn’t clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.

Answer 1

From your comments, I would just leave out the float: left and add a text-align: center

JSFiddle

Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.

See JSFiddle

There’s a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.

Update:

I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.

See this JSFiddle