制作图像的标记中心

Question

我正在使用bootstrap 3,我想在图像顶部添加一个带图标的链接并垂直居中.

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="col-post">
  <div class="post-img"> <a href="#" class="my-icon"></a> <a href="mylink">
    <div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div>
    </a> 
    </div>
  <!--post-img-->
  <div class="post-icons"></div>
</div>
</div>

我希望带有my-icon类的链接位于图像的中心.我的图标位于绝对位置,后img位于相对位置.

任何帮助将非常感激.

Answer 1

这是一些帮助我垂直居中图像的代码。它通常比水平居中要棘手得多。

#ID {
    Margin:0 auto;
    Position:absolute;
    Left:0;
    Right:0;
    Top:50%;
    Transform: translate(0, -50%);
    Display:block;
}