Question

JSFIDDLE LINK

<span class="date">January 27, 2014</span>
<span class="comment">3</span>



.comment {
    background: url(http://shrani.si/f/3E/11P/1bbcqgfF/comments.png) no-repeat;
    background-size: 12px 12px;
    display: inline-block;
    color: #9e988e;
    font-size: 12px;
}

.date {
    background: url(http://shrani.si/f/46/3O/31QIdb94/calendar.png) no-repeat;
    background-size: 12px 12px;
    display: inline-block;
    color: #9e988e;
    font-size: 12px;
}

我需要添加什么以便这样才能显示完整的图像并在右侧显示文本，并在图像中间对齐？

Answer 1

首先，指定足够大的填充以为图标创建空间。它只是一个背景图像，它不为自己保留空间，你必须要照顾它：

padding-left: 15px;

对于垂直对齐，请为垂直background-position指定center：

background: url(xy/calendar.png) no-repeat left center;

jsFiddle Demo

Answer 2

如果您希望图像作为元素，您应该将它们作为元素。背景图像应该落后于文本或其他元素。因此，如果您希望图像显示，最好将它们添加为图像元素而不是背景图像。这是fiddle。

<强> HTML：

<span class="date"><img src='http://shrani.si/f/46/3O/31QIdb94/calendar.png'/>January 27, 2014</span>
<span class="comment"><img src='http://shrani.si/f/46/3O/31QIdb94/calendar.png'/>3</span>

<强> CSS：

.comment {
display: inline-block;
color: #9e988e;
font-size: 12px;
}

.date {
display: inline-block;
color: #9e988e;
font-size: 12px;
}
.date img, .comment img{
    height:12px;
    width:12px;
    padding: 0 5px;
}

使用<span> </span>对齐图像和文本

2 个答案: