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


当前回答

应用于所有Booostrap对象的更准确的方法是只使用标准类不设置上下边距(因为图像可以从父类继承这些),所以我总是使用:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

我也做了一个Gist,所以如果任何变化将适用于任何bug,更新版本将永远在这里: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

其他回答

应用于所有Booostrap对象的更准确的方法是只使用标准类不设置上下边距(因为图像可以从父类继承这些),所以我总是使用:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

我也做了一个Gist,所以如果任何变化将适用于任何bug,更新版本将永远在这里: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

到目前为止,接受的最佳解决方案似乎是<img class="center-block"…/ >。但是没有人提到过中央块是如何工作的。

以Bootstrap v3.3.6为例:

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

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

<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的潜在影响有关。当然,中心块是最简单的解决方案。

试试这个:

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