因此,我试图实现的是,我想在多个图像上添加共享图标,其中每个图像都有不同的链接。然而,就图标而言,我希望它位于所有图像的中心。下面是我的代码示例。如有任何帮助,我们将不胜感激。的链接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;
}
一种方法是绝对定位图标相对于父元素。
使用text-align: center
进行水平居中,使用top: 50%
/transform: translateY(-50%)
进行垂直居中。
更新示例
.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%);
}