对齐图片和文字<span>

JSFIDDLE LINK 对齐图片和文字<span>

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

什么我需要补充所以这将工作在正确的充满形象得到显示和文本显示，通过图像的中间对齐？

来源

2014-01-29 user3187469

首先，指定足够大的填充以为图标创建空间。这仅仅是一个背景图像，它保留无空间本身，你要好好照顾它：

padding-left: 15px;

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

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

来源

2014-01-29 14:31:38 kapa

有了这个CSS文本不符合在左边，我希望文字的中心对齐图像对齐图片。 – user3187469

@ user3187469嗯，对我来说这挺好的。你检查了我的演示并没有看到它对齐？哪个浏览器？ – kapa

如果你想让图像充当元素，你应该让它们成为元素。背景图像应该位于文本或其他元素的后面。所以如果你想让你的图像显示出来，最好将它们添加为图像元素而不是背景图像。这是一个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; 
}

来源

2014-01-29 14:36:58 zsaat14

对齐图片和文字<span>

回答

相关问题