Bootstrap 中 img 上方的中心图标

Question

我有一个字体很棒的图标，它位于img标签顶部，问题是它没有居中。并且它显示在 Bootstrap 中每个断点的不同位置。

无论屏幕大小如何，我如何才能绝对居中图标并将其保持在中心？

演示 https://jsfiddle.net/halnex/ye3ppgej/2/

HTML

<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
  <a class="thumbnail" href="#">
    <i class="fa fa-play-circle-o fa-4x"></i>
    <img class="img-responsive" alt="" src="http://placehold.it/250x180" />
    <div class="caption">The Title</div>
  </a>
</div>

CSS

.thumbnail i {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -25px;
    margin-top: -30px;
}

Answer 1

将img和i放在一个元素中，设置position: relative在共同的父元素上，然后使用 的组合position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)来绝对居中图标

.img {
  position: relative;
}

.img i {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
</div>