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

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;

对于垂直对齐方式，为垂直方向指定center background-position :

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

jsFiddle Demo