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

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

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

水平居中使用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%);
}