响应式图像对齐中心引导程序 3

Twitter Bootstrap 3 中有 .center-block 类（自 v3.0.1），所以使用：

<img src="..." alt="..." class="img-responsive center-block" />

---

如果您使用的是 Bootstrap v3.0.1 或更高版本，则应改用 this solution。它不会使用自定义 CSS 覆盖 Bootstrap 的样式，而是使用 Bootstrap 功能。

我的原始答案如下所示，以供后代使用

这是一个令人愉快的简单修复。由于 Bootstrap 中的 .img-responsive 已设置 display: block，因此您可以使用 margin: 0 auto 使图像居中：

.product .img-responsive {
    margin: 0 auto;
}

---

仅将类 center-block 添加到图像中，这也适用于 Bootstrap 4：

<img src="..." alt="..." class="center-block" />

注意：即使使用 img-responsive，center-block 也能正常工作

---

如果您使用的是 Bootstrap 3，只需使用 .text-center 类。

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

注意：这不适用于 img-responsive

---

这应该使图像居中并使其具有响应性。

<img src="..." class="img-responsive" style="margin:0 auto;"/>

---

我会建议一个更“抽象”的分类。添加一个新类“img-center”，它可以与 .img-responsive 类结合使用：

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

---

只需将所有图像缩略图放在 row/col div 中，如下所示：

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

一切都会好起来的！

---

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

---

您仍然可以使用 img-responsive 而不会影响具有此样式类的其他图像。

您可以在此标记之前加上部分 id/div id/class 来定义嵌套此 img 的顺序。此自定义 img-responsive 仅适用于该区域。

假设您有一个 HTML 区域定义为：

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

然后，您的 CSS 可以是：

section#work .img-responsive{
    margin: 0 auto;
}

注意：此答案与整体更改 img-responsive 的潜在影响有关。当然，center-block 是最简单的解决方案。

---

试试这个代码，它也适用于 bootstrap 4 的小图标，因为 bootstrap 4 没有中心块类，所以试试这个方法会很有帮助。您可以通过将 .col-md-12 设置为 .col-md-8 或 .col-md-4 来更改图像的位置，这取决于您。

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

---

尝试这个：

.img-responsive{ 显示：块；高度：自动；最大宽度：100%；边距：0 自动； } .Image{ 背景：#ccc;填充：30px； }

---

您可以在此处使用 d-block 的属性，也可以在引导程序中使用具有属性“text-center”或在 css 中使用“text-align:center”的父 div。

图像默认显示为 inline-block，您需要将其显示为块以便使用 .mx-auto 使其居中。这可以通过内置的 .d-block 来完成：

<div>
    <img class="mx-auto d-block" src="...">  
</div>

或者将其保留为 inline-block 并将其包装在带有 .text-center 的 div 中：

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

---

要添加到已经给出的答案，将 img-responsive 与 img-thumbnail 结合使用会将 display: block 设置为 display: inline block。

---

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

---

<div class="text-align" style="text-align: center;  ">
    <img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>

你可以试试这个。

---

您可以通过定义 margin:0 auto 来修复它，或者您也可以使用 col-md-offset

---

仅使用标准类应用于所有 Booostrap 对象的更准确方法是不设置顶部和底部边距（因为图像可以从父级继承这些），所以我总是使用：

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

我也为此做了一个要点，因此如果由于任何错误而需要进行任何更改，更新版本将始终在这里：https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

---

到目前为止，接受的最佳解决方案似乎是 <img class="center-block" ... />。但是没有人提到 center-block 是如何工作的。

以 Bootstrap v3.3.6 为例：

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

<img> 的 dispaly 的默认值为 inline。值 block 将元素显示为块元素（如 <p>）。它从一个新行开始，占据整个宽度。这样，两个边距设置让图像水平停留在中间。

---

2021.09 来自一个项目：

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>

---