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


当前回答

简单地把所有的图片缩略图放在row/col div中,就像这样:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

一切都会好起来的!

其他回答

<div class="text-align" style="text-align: center;  ">
    <img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>

你可以试试这个。

你可以在这里使用属性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-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 >

我建议采用更“抽象”的分类。添加一个新类"img-center",它可以和.img-responsive类结合使用:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}