垂直定位僞圖像元素（CSS）

Question

我正在使用:before僞元素將一個小圖像添加到我網站上的下載鏈接。圖像的高度大於線條高度，圖像底部與文字底部對齊。

如何改變僞元素的垂直對齊？理想情況下，圖像的中心與文本的中心對齊？

Answer 1

使圖像inline elment，設置hegth它並設置垂直排列容器。

Answer 2

我找不到優雅的解決方案。這裏是一個的jsfiddle與工作解決方案：

http://jsfiddle.net/rcravens/pAcDE/

考慮以下因素：

<div id='elem'>Bob Cravens</div> 

我有這樣的CSS：

#elem:before{ 
    content: ''; 
    height: 160px; 
    width: 136px; 
    background: url('http://bobcravens.com/Content/images/author_thumb.png'); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
#elem{ 
    background-color: red; 
    margin: 60px 136px; 
} 

的：以前可能是你有什麼除了'position：absolute'風格之外。然後我使用了餘量來抵消原始div。

希望這會有所幫助。

鮑勃

Answer 3

我覺得這部作品在大多數情況下，只要將文字和圖像不是按比例繪製的出路：

#elem:before 
{ 
    content: url(image.png); 
    position: relative; 
    bottom: -.5ex; 
    margin-right: .5em; 
} 

的margin-right提出的空間一點點之間圖像和文字。