ブートストラップとCSSに関連する画像を中央に配置する方法

Question

イメージを中央に配置しようとしていますが、いくつかの試行の後に正しく動作させることができませんでした。明らかに私が行っている変更は効力を発揮していません。画像コードは、私は初心者ですので、私は変更を適用する必要がありますどのファイルか分からないし、要素を検査した後、私はそれはCSS（style.cssに）とBootstrap（ブートストラップに関連していたことに気づい

<div class="col-md-4 col-sm-3 team-grid team-grid1 animated wow slideInUp" data-wow-delay=".5s"> 
    <img src="images/shane-de-abreu-arquetipo-shane.jpg" alt="Shane de Abreu" class="img-responsive" /> 
    <div class="p-mask"> 
     <h4>Shane de Abreu</h4> 
     <ul> 
      <li><a class="podbean" href="http://arquetiposhane.podbean.com"></a></li> 
      <li><a class="facebook" href="https://www.facebook.com/arquetiposhane"></a></li> 
      <li><a class="youtube" href="https://www.youtube.com/channel/UCj6b5dpMH0RXAEpJV6fN-bQ"></a></li> 
     </ul> 
    </div> 
</div> 

を下回っています.css）。だから私はそれらのファイルにW3Sの推奨コードを追加しようとしました。

img { 
    display: block; 
    margin: auto; 
} 

問題は、正確にどこに配置しなければならないかわからないため、いくつかの試みを行ったが、成功しなかったということです。私は

img { 
    width: 100%; 
} 

と試してみました。また、IMGの設定（のstyle.cssファイル）を変更しようとしたteam-grid1設定

.team-grid1,.team-grid2{ 
    margin-bottom:20px; 
} 

を変更することで試してみました、また

} 
.team-grid{ 
    position:relative; 
    overflow: hidden; 
} 

以下team-grid設定を変更してみましたimgの設定を変更する（bootstrap.cssファイル）

img { 
    vertical-align: middle; 
} 
.img-responsive, 
.thumbnail > img, 
.thumbnail a > img, 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    display: block; 
    max-width: 100%; 
    height: auto; 

} 

W3S推奨のコード（ブートストラップまたはスタイル）を配置する必要があるかどうかわかりません。明らかに、一方が他方を支配していますが、どちらが正しいか分かりません。誰かがこの画像を中心に置くのを助けることができますか？ www.arquetiposhane.tkのサイトにあります。

多くの感謝！コードこの下の

Answer 1

使用は、あなたの画像中心

.team-grid{ 
    margin: 0 auto; 
    float: none; 
}