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

这是JS小提琴：http://jsfiddle.net/CeZLy/

我试图将评论气泡和文本放在黑框内。文本将始终更改，因此我无法在a元素上设置固定宽度。有人可以帮我解决这个问题吗？

注意：如果我不清楚，请抱歉。我想要文本左侧的评论气泡，然后我想要评论气泡和黑色框内的文本。

Answer 1

根据您的评论，我会遗漏float: left并添加text-align: center

JSFiddle

垂直居中似乎有点困难。如果您想垂直居中并且高度固定，可以将链接的line-height设置为相同的高度。

请参阅JSFiddle

在Vertical Centering With CSS有一个关于垂直居中的好教程，解释了几种方法并强调了每种方法的优缺点。

更新：

我只是重读你的评论。也许我误解了你。如果您只是希望链接向上或向下移动，您还可以在顶部和底部使用不同的填充。

请参阅此JSFiddle

Answer 2

删除范围。将图像设置为a元素的背景。使用text-align:center;并为图片添加左边距：

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

.leave-comment a {
    background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}

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

检查：

http://jsfiddle.net/C9HKr/

Answer 3

.leave-comment {
background-color: #010101;
 clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}

嗯，你现在需要跨度。

http://jsfiddle.net/CeZLy/7/正在行动

div中的中心图像和文本

3 个答案: