引导程序中 img 上的中心图标

Question

我有一个字体很棒的图标，它站在img标签的顶部，问题是它没有居中。它在引导程序中的每个断点上都显示在不同的位置。

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

演示 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>

Answer 2

使用

transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
-moz-transform: translate(0%,-50%);
-o-transform: translate(0%,-50%);

下面的代码片段

小提琴来了

Answer 3

您可以使用flex布局进行居中：

你必须稍微调整一下你的html/css：

<a class="thumbnail" href="#">
    <div class="icon-wrap">
      <i class="fa fa-play-circle-o fa-4x"></i>
    </div>
    <img class="img-responsive" alt="" src="http://placehold.it/250x180" />
    <div class="caption">The Title</div>
</a>
.thumbnail {
  position: relative;
}
.icon-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

如果需要调整标题，可以向.icon-wrap i添加margin-bottom。

您还可以将height设置为180px是否始终包含该大小的图像