使响应式图像居中

Question

在页面上，我想要一个我想要在屏幕上居中的图像（水平）。

它具有响应性，因此在屏幕变得太小时会调整大小。

<img class="img-responsive" src="~/Content/Images/marketing/combined-displays.png" />

我正在使用它，但W3C与此交叉，并希望我使用样式。

所以，我读了，发现这是尝试中心图像：

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}

然后我将

更改为：

<p class="blocktext">
    <img....>
</p>

然而，在屏幕中间，图像很小。

所以我删除了宽度，但它根本不居中。

如何让这个课程将我的形象置于画面中央？

Answer 1

您可以将图片的display类型更改为block，并通过margin: 0 auto声明将其与中心对齐。

此外，Twitter bootstrap有一个名为.center-block的内置类，完全相同：

<强> Example Here

<img src="http://placehold.it/150x150" class="img-responsive center-block">

而.img-responsive会处理剩下的事情：

.img-responsive { /* Taken from Twitter bootstrap source */
    display: block;
    max-width: 100%;
    height: auto;
}

Answer 2

简单的css解决方案

img {
      display:block;
      margin:0 auto;
      max-width:100%;
    }

最大宽度：100％;确保img不比父

宽