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

问题描述

我使用 Bootstrap 3 制作目录.当在平板电脑上显示时，产品图片看起来很难看，因为它们的尺寸很小 (500x500)，并且在浏览器中的宽度为 767 像素.我想将图像放在屏幕中央，但由于某种原因我不能.谁来帮助解决问题?

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?

推荐答案

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

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.

我的原始答案如下所示

这是一个令人愉快的简单修复.因为 Bootstrap 的 .img-responsive 已经设置了 display: block，你可以使用 margin: 0 auto 来居中图像:

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屋！