我使用Bootstrap 3做一个目录。当在平板电脑上显示时,产品图像看起来很难看,因为它们的尺寸很小(500x500),在浏览器中宽度为767像素。我想把图像放在屏幕的中央,但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
你可以在这里使用属性d-block,或者你可以在bootstrap中使用属性'text-center'或在css中使用'text-align: center'的父div。
图像默认显示为内联块,您需要将其显示为块以便以.mx-auto居中。这可以用内置的.d-block完成:
<div>
<img class="mx-auto d-block" src="...">
</div>
或者将其保留为内联块,并使用.text-center将其包装在div中:
<div class="text-center">
<img src="...">
</div>
其他回答
我建议采用更“抽象”的分类。添加一个新类"img-center",它可以和.img-responsive类结合使用:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
如果你使用Bootstrap 3,只需使用.text-center类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意:这对img-responsive不起作用
你可以在这里使用属性d-block,或者你可以在bootstrap中使用属性'text-center'或在css中使用'text-align: center'的父div。
图像默认显示为内联块,您需要将其显示为块以便以.mx-auto居中。这可以用内置的.d-block完成:
<div>
<img class="mx-auto d-block" src="...">
</div>
或者将其保留为内联块,并使用.text-center将其包装在div中:
<div class="text-center">
<img src="...">
</div>
如果使用Bootstrap v3.0.1或更高版本,则应该使用此解决方案。它不会用自定义CSS覆盖Bootstrap的样式,而是使用Bootstrap特性。
我最初的答案如下,供后人参考
这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block,你可以使用margin: 0 auto将图像居中:
.product .img-responsive {
margin: 0 auto;
}
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>