Question

所以我想要完成的是我想在多个图像上添加共享图标，其中每个图像将具有不同的链接，但是就图标而言，我希望它在下面的所有图像的中心是样本我的代码任何帮助将不胜感激。 http://jsfiddle.net/nhxjvmhh/

的链接

HTML

<div class="movieicon">
    <a href="v/link">
        <img src="https://lh3.googleusercontent.com/-l2d24l8Zir4/Txh8bYhN6rI/AAAAAAAAC3s/lWtdZuBS-bc/w500-h350-no/24.gif" width=300 height=180 />
    <span  class="fa fa-share-square-o"></span>
    </a>
</div>

CSS

.fa-share-square-o:hover {
    color:#4099FF;
}
.fa-share-square-o{
    color: #cccccc;
    font-size: 50px;
}

Answer 1

一种方法是将图标 relative 绝对定位到父元素。

使用text-align: center进行水平居中，使用top: 50% / transform: translateY(-50%)进行垂直居中。

Updated Example

.movieicon {
    position: relative;
    display: inline-block;
}
.movieicon a {
    display: block;
}
.movieicon .fa-share-square-o {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

如何在多个图像上显示fontawesome图标？

1 个答案: