响应式图片居中对齐Bootstrap 3

Question

我使用Bootstrap 3制作了一个目录。在平板电脑上显示时，产品图像因其小尺寸（500x500）和浏览器中的767像素宽度而显得很丑陋。我想把图片放在屏幕中央，但出于某种原因我无法实现。谁能帮助解决这个问题？

- Konstantin Rusanov

---

我喜欢你网站和产品的设计 - 做得很好 :) - Bojangles

「为什么需要在问题正文中放置代码」的另一个例子。 - LEQADA

在父元素中尝试这个 Boostrap 类：img d-flex justify-content-center border border-light p-5。 - JWC May

Answer 1

Twitter Bootstrap 3（自v3.0.1起）中有.center-block类，因此请使用：

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

- DHlavaty

---

这应该是被认可的答案，因为您不需要添加任何CSS即可使用它。 - user2602152

class="img-responsive" style="margin: 0 auto;" 可以使用，但是 class="img-responsive center-block" 不行（针对 Bootstrap 3 的几个月前的版本）。 - mxro

当使用img-responsive时，居中对齐无法生效。 - Ismael

@DHlavaty，您能解释一下使用.img-responsive和.center-block的区别以及仅使用像被接受的答案建议的自动边距与.img-responsive相比，哪种方法更加健壮吗？ - user137717

如果您的图像应该是可点击的，则可能不希望使用此选项。也就是说，如果它被包裹在 <a href="#"> </a> 对中，可点击区域将扩展到封闭容器的完整宽度，这可能比您的图像大得多。这可能会让用户误以为点击了“空白”区域。 - CXJ

Answer 2

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

为了使图像居中，您可以使用margin: 0 auto，因为Bootstrap中的.img-responsive已经设置了display: block。

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

- Bojangles

---

жңҖеҘҪеҲӣе»әдёҖдёӘдҪҝз”Ёmargin: 0 auto зҡ„ж–°зұ»пјҢиҖҢдёҚжҳҜжӣҙж”№.img-responsiveзұ»гҖӮ - knite

这是一个不错的想法，尽管就个人而言，我无法想象任何情况下我会想要一个不居中的响应式图片，特别是在这种设计下。一切都取决于使用情况以及未来可能发生的事情。 - Bojangles

如果您正在使用Bootstrap v4或更高版本，请参考此答案：https://dev59.com/KGgv5IYBdhLWcg3wDsnZ#43293957 - snorberhuis

Answer 3

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

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

注意：即使使用 img-responsive，center-block 仍然有效。

- Harry Bosh

---

最佳回应，但被低估了。这就是为什么你要使用一个框架的原因！ - Baumannzone

非常棒。谢谢。 - AndrewLeonardi

它可以工作了，谢谢。 - Dhiren Patel

Answer 4

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

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

注意：这不能与img-responsive一起使用。

- Sai Kiran Sripada

---

问题是关于 img-responsive 的。 - Alexey Kosov

对于img-responsive，请添加img-center（在3.3.6上测试过），以供可能在Google搜索中看到此内容的人使用。 - DardanM

Answer 5

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

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

- nPcomp

Answer 6

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

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

- Michael

Answer 7

您可以在此处使用d-block属性，或者在bootstrap中使用具有“text-center”属性的父级div，或在css中使用“text-align：center”。默认情况下，图片以内联块显示，您需要将其显示为块以便使用.mx-auto居中。这可以通过内置的.d-block完成：

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

或将它保留为inline-block，然后用

包装，并添加.text-center类：

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

- Sourabh Potnis

Answer 8

将所有图像缩略图放在一个如下的行/列 div 中：

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

一切都能正常工作！

- Power Engineering

Answer 9

您可以使用 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;
}

注意：本答案涉及修改整个对网页的潜在影响。当然，是最简单的解决方案。

- KannarKK

---

这个答案没有得到足够的赞赏，将图像包装在行类中非常重要，可以使图像在图像下方有文本时居中。 - Glenn Plas

Answer 10

尝试使用此代码，即使在Bootstrap 4中没有center-block类，它也适用于小图标。尝试此方法会很有帮助。您可以通过将.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>

- faseeh