Html 响应图像对齐中心引导3

我使用Bootstrap3制作目录。在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小（500x500），在浏览器中的宽度为767像素。我想把图像放在屏幕中央，但由于某种原因我不能。谁将帮助解决这个问题

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

我的原始答案如下所示，供后人参考

---

这是一个轻松愉快的解决方案。由于引导中的

.img responsive

已设置

显示：块

，因此可以使用

边距：0自动

将图像居中：

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

---

为了补充已经给出的答案，让

img responsive

与

img缩略图相结合将
display:block
设置为
display:inline block
我建议使用更“抽象”的分类。添加一个新类“img中心”，可与.img响应类结合使用：

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

TwitterBootstrap3中有类（从v3.0.1开始），所以使用：

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

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



注意：这不适用于img responsive

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




.tocenter{
保证金：0自动；
显示：内联；
}
您仍然可以使用
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>

注：这个答案与整体改变
img responsive
的潜在影响有关。当然，
中心块
是最简单的解决方案。
只将类
中心块
添加到图像中，这也适用于引导4：

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



注意：
中心块
即使在使用了
img responsive
时也能工作

您可以通过定义边距来修复它：0自动

也可以使用col md offset



.img响应{
保证金：0自动；
}
形象
.img responsive类使图像能够很好地缩放到父元素（调整浏览器窗口大小以查看效果）：

试试这段代码，它对小图标也适用于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>

仅使用标准类应用于所有Booostrap对象的更准确方法是不设置上下边距（因为图像可以从父对象继承这些边距），因此我始终使用：

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

我也为这做了一个要点，所以如果由于任何bug而应用任何更改，更新版本将始终在这里：
这将使图像居中，并使其响应

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


试试这个：


.img响应{
显示：块；
高度：自动；
最大宽度：100%；
保证金：0自动；
}
.形象{
背景：#ccc；
填充：30px；
}
到目前为止，最好的解决方案似乎是
。但是没有人提到
中心块是如何工作的

以Bootstrap v3.3.6为例：

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

的
dispaly
的默认值是
inline
。值
块
将元素显示为块元素（如
）。它从一条新线开始，占据整个宽度。这样，两个边距设置让图像保持在中间水平。
简单地将所有图像缩略图放在行/列div中：
<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>


#你的照片在这里。。。

一切都会好起来的
 

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

">

您可以尝试此操作。
您可以在此处使用d-block的属性，也可以在引导中使用属性为“text center”的父div，或在css中使用属性为“text align:center”的父div

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

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

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



或者将其保留为内联块，并使用将其包装在div中。text center：

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

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


我喜欢你网站和产品的设计-干得好
：）
另一个例子是“为什么我们需要将代码放入问题正文中？”“。请在父元素中尝试此Boostrap类：img d-flex justify资源中心边框灯p-5Why
display:table
？它已经是
display:block
了，这足以让
margin:0 auto
正常工作。可能最好创建一个带有
margin:0 auto
的新类，而不是更改。img responsive。这是一个想法，尽管我个人想不出任何地方我想要一个不居中的响应图像，尤其是在这种设计中。这完全取决于用例，以及将来会发生什么如果您使用Bootstrap v4或更高版本，请查看此答案：这应该是公认的答案，因为您不需要添加任何CSS来使用它。
class=“img responsive”style=“margin:0 auto；”“
适用于我
class=“img responsive center block”
不适用（bootstrap 3，但几个月前的版本）使用img responsive时，“对齐中心”不起作用。@DHlavaty您能解释一下使用.img responsive和.center块与仅使用.img responsive和自动边距的区别吗？是否有一种方法更可靠？您可能没有
<div>
    <img class="mx-auto d-block" src="...">  
</div>

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