レスポンシブルimg with boostrap

Question

私はフッターに反応しやすいロゴを作成する必要があります。

HTML

<!-- Footer --> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="landing img-responsive footer"> 
       <div> 
        <img src="~/img/logo-white-small.png" /> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.landing.img-responsive.footer { 
    margin: 0 auto; 
} 

しかし、間違っていることです：私は、ブートストラップでそれを次のように解決すると考えていましたか？

Answer 1

私はあなたがまた、これらのクラス間.imgの応答性.footerを.landing の間にスペースをチェック

<center><img src="~/img/logo-white-small.png" /></center> 

または代わり

<div style="text-align:center" class="img-responsive"> 
     <img src="~/img/logo-white-small.png" /> 
</div> 

を使用することをお勧めしますあなたの中にCSS。

Answer 2

あなたは使用することができます。

img { 
    display: table; 
    margin: auto; 
} 

を、それが応答するために、ブートストラップの.img-responsiveクラス部分を追加しながら、画像を中央に。

https://jsfiddle.net/c79bstuu/

Answer 3

応答性の高いイメージのユーザーimg-responsiveクラス。 中心ブロッククラスを使用して、要素中心を水平に整列させます。

<img src="~/img/logo-white-small.png" class="img-responsive center-block" /> 

これは、画像を反応的にし、水平方向に整列させます。 もしあなたが垂直に整列したいならば、display：table-cellをchild divに、display：tableをparent divに使うべきです。また、子divからfloatプロパティを削除する必要があります。