引導程序中的img中的中心圖標

我有一個位於img標記頂部的字體真棒圖標，問題是它沒有居中。並且它在Bootstrap中的每個斷點上顯示在不同的位置。引導程序中的img中的中心圖標

無論屏幕大小如何，我怎樣才能將圖標居中放置並保持在中心位置？

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

來源

2017-04-08 Halnex

ippet把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>

來源

2017-04-08 20:15:24

使用

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

錫下面

fiddle is here

來源

2017-04-08 20:14:23 repzero

，仍然需要設置基於文本的標題量的固定餘量。如果向標題添加更多文字，圖標不居中。 https://jsfiddle.net/opxjoqrj/1/ –

讓我那裏的好友 – repzero

看到你改變你的pic..puppet？嘻嘻 – repzero

您可以使用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; 
}

，如果你需要調整標題您可以添加margin-bottom到.icon-wrap i。

你也可以設置height到180px如果總是會包含尺寸圖像

來源

2017-04-08 20:20:56

引導程序中的img中的中心圖標

回答

相關問題