跨度叠加元素不良位置

时间:2016-05-07 16:06:16

标签: html css

在我的网站上{http://milesopedia.com)我在图片上有这个叠加图,但图标没有正确对齐,正如您在此处所见:

current problem

这是一个带有主题的基于WordPress的博客,如果我查看主题预览(http://themes.tielabs.com/sahifa/category/world/),元素就会正确定位:

enter image description here

我比较了html和css,它们看起来和我一模一样。标记使用带有伪前元素的span来呈现图标。我无法找到问题的根源。

以下是代码:

<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>    

2 个答案:

答案 0 :(得分:3)

display: inline;元素设置<span>

答案 1 :(得分:2)

重写从font-awesome.css继承的此规则:

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

我只是试图在检查器中禁用它,图标按照您的预期居中。

<强> UPD: 或者,根据@jacob的回答,只需为您的图标display: inline元素设置span即可采用更简洁的方法。