中心图像和文本DIV中

HTML中心图像和文本DIV中

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

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

来源

2013-01-16 J82

我总是接受的答案。只是在我问过的几个问题上，我没有得到任何答案。为什么downvote？ – J82

从您的意见，我只想离开了float: left并添加text-align: center

JSFiddle

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

见JSFiddle

有大约垂直居中一个很好的教程在Vertical Centering With CSS，解释了几种方法，并强调各的优点和缺点。

更新：

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

看到这个JSFiddle

来源

2013-01-16 23:47:41

谢谢！无论如何要垂直居中文本？它看起来有点偏心。我会接受你的回答。 – J82

@John请参阅最新的答案。它*可能会为你工作。 –

@John再次更新。我希望就是这样。 –

.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-16 23:38:37 Leeish

对不起，我猜不清楚。我想要文字左侧的评论泡泡。不重叠中心的文字。 – J82

'将注释泡泡和文字置于黑框内。“并不意味着你刚写下的内容。将左侧添加到位置。请参阅编辑。 – Leeish

删除跨度。将图像设置为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-16 23:53:50 Madbreaks

中心图像和文本DIV中

回答

相关问题