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

本文翻译自：Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. 我使用Bootstrap 3进行目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小（500x500），浏览器的宽度为767像素。 I want to put the image in the center of the screen, but for some reason I can not. 我想把图像放在屏幕的中央，但由于某种原因，我不能。 Who be will help solve the problem? 谁将帮助解决问题？

---

#1楼

参考：https://stackoom.com/question/1FT1E/响应式图像对齐中心引导

---

#2楼

If you're using Bootstrap v3.0.1 or greater, you should use this solution instead. 如果您使用的是Bootstrap v3.0.1或更高版本，则应使用此解决方案 。 It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature. 它不会使用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap功能。

My original answer is shown below for posterity 我的原始答案如下所示

---

This is a pleasantly easy fix. 这是一个非常简单的解决方案。 Because .img-responsive from Bootstrap already sets display: block , you can use margin: 0 auto to center the image: 因为来自Bootstrap的.img-responsive已经设置了display: block ，你可以使用margin: 0 auto来使图像居中：

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

---

#3楼

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

---

#4楼

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

---

#5楼

I would suggest a more "abstract" classification. 我会建议一个更“抽象”的分类。 Add a new class "img-center" which can be used in combination with .img-responsive class: 添加一个新类“img-center”，可以与.img-responsive类结合使用：

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

---

#6楼

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

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