如何在多個圖像上顯示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%); 
}