使用边距居中图像答案

【问题标题】：Center image using margins使用边距居中图像
【发布时间】：2017-06-24 21:59:05
【问题描述】：

当我在 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。我只是好奇。）

【问题讨论】：

图像的宽度不同，因此它们之间的边距不会相同。将它们设为block 并使用margin: auto。您只需要将左/右 margins 设为 auto codepen.io/mcoker/pen/rwxOPE。
实际上只有方形图像在使用边距时会改变大小。谢谢@MichaelCoker

标签： html css svg cross-browser margin

【解决方案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">

【讨论】：