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


当前回答

在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>

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

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

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

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

你可以试试这个。

您仍然可以使用img-responsive,而不影响使用此样式类的其他图像。

你可以在这个标签前面加上section id/ div id/class来定义一个img被嵌套的顺序。这个自定义的img-responsive将只在该区域工作。

假设你有一个HTML区域定义为:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

然后,你的CSS可以是:

section#work .img-responsive{
    margin: 0 auto;
}

注意:这个答案与整体改变img-responsive的潜在影响有关。当然,中心块是最简单的解决方案。