我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
其他回答
我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
到目前为止，接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。
以Bootstrap v3.3.6为例:
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始，并占用整个宽度。通过这种方式，两个边距设置让图像水平地保持在中间。
2021.09来自一个项目:
<div class="d-flex" style="height: 60px; width: 60px;">
<img alt="ddd" src="myurl" class="m-auto"/>
</div>
试试这个:
.img-responsive { 显示:块; 高度:汽车; max-width: 100%; 保证金:0汽车; ｝ .Image { 背景:# ccc; 填充:30 px; ｝ < div class = "图像" > <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> < / div >
在Twitter Bootstrap 3中有.center-block类(从v3.0.1开始)，所以使用:
<img src="..." alt="..." class="img-responsive center-block" />
