跨度覆盖元件位置不好

在我的网站（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

跨度覆盖元件位置不好

回答

相关问题