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

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

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

2011-02-13 Eddie

你有沒有嘗試添加填充：before元素？ – rcravens 2011-02-13 14:22:14

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

2011-02-13 14:21:43 gor

我解決了這個問題（至少在視覺上），通過使用圖像作爲鏈接的非重複背景而不是：before元素。我不得不使用`display：block`並將鏈接的高度設置爲圖像的高度，然後使用`padding-left`和`padding-top`來正確定位鏈接相對於圖像背景的位置。 – Eddie 2011-02-21 14:36:02

我找不到優雅的解決方案。這裏是一個的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。

希望這會有所幫助。

鮑勃

來源

2011-02-13 15:02:30 rcravens

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

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

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

來源

2012-06-09 17:26:00

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

回答

相關問題