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


当前回答

在Twitter Bootstrap 3中有.center-block类(从v3.0.1开始),所以使用:

<img src="..." alt="..." class="img-responsive center-block" />

其他回答

试试这个:

.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 class="center-block"…/ >。但是没有人提到过中央块是如何工作的。

以Bootstrap v3.3.6为例:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

<img>的display默认值为inline。Value block将一个元素显示为块元素(如<p>)。它从一个新的行开始,并占用整个宽度。通过这种方式,两个边距设置让图像水平地保持在中间。

尝试这段代码,它将工作的小图标也与bootstrap 4,因为没有中心块类是bootstrap 4,所以尝试这种方法,这将是有帮助的。你可以通过将。col-md-12设置为。col-md-8或。col-md-4来改变图像的位置,这取决于你。

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

要添加到已经给出的答案,将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。