響應img與助推器

我需要在我的腳註響應一個徽標，它應該居中。我以爲我可以解決這個問題通過以下方式與引導：響應img與助推器

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

但是，這是不正確的？

來源

2016-08-18 McDuck4

您需要爲圖像提供一定的寬度以便以此方式居中。 – Goombah

div元素仍然佔用所有可用寬度，所以兩邊的自動邊距將實際爲0 - 元素_is_「居中」，但沒有太多可見的效果。您需要給div元素一個寬度，或者將自動邊距應用於圖像（並使其顯示：block，因爲只有那些自動邊距才起作用）。 – CBroe

我會建議你使用

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

還要檢查之間的空間.landing這些類之間.IMG響應.footer在你的CSS。

來源

2016-08-18 10:28:11 Aravind

您可以使用：

img { 
    display: table; 
    margin: auto; 
}

要居中的圖像，同時增加了自舉的.img-responsive類部分，使其響應。

https://jsfiddle.net/c79bstuu/

來源

2016-08-18 10:13:58 arnolds

響應式圖像的用戶img響應類。使用中心塊類來橫向對齊元素中心。

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

它會使您的圖像響應以及水平居中對齊。不管怎麼說，如果你想垂直對齊，那麼你應該使用display：table-cell爲子div，而display：爲父div的表。您還需要從子div中刪除浮動屬性。

來源

2016-08-18 10:28:12 hdev

響應img與助推器

回答

相關問題