對齊圖片和文字<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>

回答

相關問題