响应图像对齐中心引导3 [英] Responsive image align center bootstrap 3

问题描述

我使用Bootstrap做目录3.当在平板电脑上显示时，产品图片看起来很丑陋，因为它们的小尺寸（500x500）和浏览器中的宽度为767像素。我想把图像放在屏幕的中心，但由于某种原因，我不能。谁会帮助解决问题？

您可以在此处查看实时示例。

解决方案

如果您使用Bootstrap v3.0.1或更高版本，应使用这个解决方案。

我的原始答案如下所示为后代 em>

---

这是一个愉快的修复。因为来自Bootstrap的 .img-responsive 已经设置了 display：block ，可以使用 0 auto 将图片置于中心：

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

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. 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?

You can see a live example here.

解决方案

If you're using Bootstrap v3.0.1 or greater, you should use this solution instead. It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature.

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:

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

这篇关于响应图像对齐中心引导3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！