跨度覆蓋元件位置不好

在我的網站（http://milesopedia.com）我有這個覆蓋在圖像上，但圖標沒有正確對齊，因爲你可以在這裏看到：跨度覆蓋元件位置不好

這是一個基於WordPress的 - 博客一個主題，如果我看主題的預覽（http://themes.tielabs.com/sahifa/category/world/）元素被正確定位：

我比較了HTML和CSS，他們似乎IDE ntical對我來說。標記使用帶有僞元素之前的跨度來呈現圖標。我找不到問題的根源。

下面的代碼：

<div class="post-thumbnail"> 
    <a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark"> 
     <img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">         
     <span class="fa overlay-icon"></span> 
    </a> 
</div>

來源

2016-05-07 MatthieuGD

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

雖然看起來像是一個定位問題。 –

只要注意，你的'img'元素沒有正確關閉（應該是這樣的：'' –

設置display: inline;爲那個<span>元素。

來源

2016-05-07 16:27:37 jakob

覆蓋這條規則從font-awesome.css繼承：

.fa { 
    transform: translate(0, 0); 
}

我只是試着在檢查和圖標來禁用它，你希望得到的中心。

UPD： 或者，按照@jacob答案，還有一個更簡潔的方法只爲你的圖標span元素設置display: inline。

來源

2016-05-07 16:20:18 markoffden

跨度覆蓋元件位置不好

回答

相關問題