如何使图片居中显示

Question

目前我在项目中保存了一张地图的图片，希望在我的第一个网站中使用。虽然我有一些HTML经验，但对ASP.NET和CSS非常陌生。我现在遇到的问题是如何适当地居中拉伸图片，以便无论浏览器窗口的大小如何，地图的中心始终保持居中。

请给予建议！

<section>
    <div class="container-fluid">
        <div class="row">
            <img src="/img/additional/map.png"/>
        </div>            
    </div>
</section>

编辑 1：

我在 http://getbootstrap.com/css/#images 上找到了以下信息：

响应式图片

通过添加 .img-responsive 类，Bootstrap 3 中的图片可以变得对响应式更加友好。这将把 max-width: 100%;、height: auto; 和 display: block; 应用于图片，使其可以很好地缩放到父元素。

如果要居中使用 .img-responsive 类的图像，请改用 .center-block 而不是 .text-center。请参见助手类部分以获取有关 .center-block 的更多详细信息。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，带有 .img-responsive 的 SVG 图像尺寸不成比例。为了解决这个问题，在必要时添加 width: 100% \9;。Bootstrap 不会自动应用这一点，因为它会对其他图像格式造成复杂性。

<img src="..." class="img-responsive" alt="Responsive image">

- Matthew

---

在图像上添加 text-align: center; 或 margin: 0 auto。 - Tushar

你在使用Bootstrap吗？ - Roli Agrawal

是的，实际上是下载了一个免费的Bootstrap模板。 - Matthew

使用text-center类和row一起。 - vivekkupadhyay

你也可以使用 Center-block 类。 - Vinayak

Answer 1

根据 http://getbootstrap.com/css/#images，添加了 class="img-responsive center-block"。

<section>
    <div class="row">
        <img class="img-responsive center-block" src="/img/additional/map.png"/>
    </div>
</section>

- Matthew

Answer 2

只需将中心标签添加到图像即可。

<section>
   <div class="container-fluid">
      <div class="row">
         <center>
            <img src="/img/additional/map.png"/>
         </center>
      </div>            
  </div>
</section>

- chandni

---

<center>元素自HTML 4版本起已被弃用。 - uceumern

Answer 3

如果您正在使用Bootstrap，您可以这样做：

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

- Diego Venâncio

Answer 4

你也可以使用纯CSS，例如：

.

center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

- David Smith

Answer 5

添加class center-block 参考: 这里

例如: <img class="center-block" src="/img/additional/map.png"/>

- Vinayak

---

<img class="center-block" src="/img/additional/map.png"/> - Vinayak