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


当前回答

只添加类中心块到一个图像,这适用于Bootstrap 4:

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

注意:即使使用img-responsive, center-block也可以工作

其他回答

尝试这段代码,它将工作的小图标也与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>

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

<img src="..." alt="..." class="img-responsive center-block" />
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

如果你使用Bootstrap 3,只需使用.text-center类。

<div class="text-center">
    <img src="..." alt="..."/>
</div>

注意:这对img-responsive不起作用

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

你可以试试这个。