html - 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放在一起，在共同的parent上设置position: relative，然后使用的组合>position:absolute；顶部:50%；左: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>