4

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元素上设置固定宽度。有人可以帮我解决这个问题吗？

注意：对不起，如果我不清楚。我想要文本左侧的评论气泡，然后我想要评论气泡和文本在黑框内居中。

4

3 回答 3

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/

于 2013-01-16T23:53:50.740 回答
1

从您的评论中，我会省略float: left并添加一个text-align: center

JSFiddle

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

见JSFiddle

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

更新：

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

看到这个JSFiddle

于 2013-01-16T23:47:41.840 回答
0 
.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/在行动

于 2013-01-16T23:38:37.807 回答