余白を使用したセンター画像

Question

ChromeとFirefoxでは、画像の中央と縮小に左右の余白を使用するとブラウザの互換性に問題があります。パーフェクト、それは私が欲しいものです。 Buuuuut、最初の画像でのみ、他の画像は同じように反応しません。

IEとEdgeでは、私が望むように最初の作品でさえもありません。画像はちょうど右に行く。これはなぜ起こるの

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Ski_trail_rating_symbol-blue_square.svg/600px-Ski_trail_rating_symbol-blue_square.svg.png" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;"> 
<img src="http://s.cdpn.io/3/kiwi.svg" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;"> 
<img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive center-block logo-index ng-scope" style="margin: 0 39%;"> 

Codepen

説明？ （はい、ソリューションがWidth: Percentageを使用することがわかります。私はちょうど興味がありました）

Answer 1

余白を使ってイメージのサイズを制御していますか？

img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.img1 { 
 
    width: 100px; 
 
}

<img src="http://sismonitor.com.br/sismonitor/images/logo.svg" class="img1 img-responsive center-block logo-index ng-scope"> 
 

 
<img src="http://s.cdpn.io/3/kiwi.svg" class="img2 img-responsive center-block logo-index ng-scope"> 
 

 
<img src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img3 img-responsive center-block logo-index ng-scope">