ブートストラップでimgの中心にあるアイコン

Question

imgタグの上にフォントの素晴らしいアイコンがありますが、中央にないことが問題です。また、Bootstrapの各ブレークポイントの異なる位置に表示されます。

どのように画面のサイズに関係なく、アイコンを絶対に中央に置いて中央に置くことができますか？

DEMOhttps://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

以下ippetは絶対にアイコン

.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>

を中心に position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)の組み合わせを使用し、その後、一緒要素で imgと iを入れて共通の親に position: relativeを設定しました

Answer 2

使用

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

のSn

fiddle is here

Answer 3

flexレイアウトをセンタリング用に使用することができます。

あなたのHTML/CSSを少し調整する必要があります：あなたはタイトルのために調整する必要がある場合は.icon-wrap iにmargin-bottomを追加することができ

<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; 
} 

。

そのは常にまだキャプション内のテキストの量に基づいて一定のマージンを設定する必要があり、そのサイズの画像