响应式图像对齐中心引导程序3

423

我使用Bootstrap 3进行目录编制。当在平板电脑上显示时，由于产品尺寸较小（500x500），浏览器中的宽度为767像素，因此产品图像看上去很难看。我想将图像放在屏幕中央，但是由于某些原因，我不能。谁将帮助解决问题？

产品页面一部分的屏幕截图，其中产品不在标题下方居中

— 康斯坦丁·鲁萨诺夫（Konstantin Rusanov）
source

5

我喜欢您的网站和产品的设计-不错的工作:)

— Bojangles 2013年

7

“为什么我们需要将代码放入问题正文”的另一个示例。

— LEQADA

572

如果您使用的是Bootstrap v3.0.1或更高版本，则应改用此解决方案。它不会使用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap功能。

我的原始答案如下所示

这是一个非常容易的修复。因为.img-responsive已经从Bootstrap设置了display: block，所以可以margin: 0 auto用来使图像居中：

.product .img-responsive {
    margin: 0 auto;
}

— Bojangles
source

35

用margin: 0 auto而不是更改.img-response 创建新类可能更好。

— knite

4

这是一个想法，尽管我个人想不起我想让响应式图像不居中的任何地方，尤其是对于这种设计。这完全取决于用例，以及将来会发生什么

— Bojangles

如果您使用的是Bootstrap v4或更高版本，请查看以下答案：stackoverflow.com/a/43293957/4102515

— snorberhuis

1156

.center-blockTwitter Bootstrap 3（自v3.0.1以来）有一个类，因此请使用：

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

— DHlavaty
source

27

这应该是可接受的答案，因为您无需添加任何CSS即可使用它。

— user2602152 2014年

16

class="img-responsive" style="margin: 0 auto;"为我class="img-responsive center-block"工作不（bootstrap 3，但一个月大的版本）

— mxro 2014年

9

使用img响应时，对齐中心不起作用。

— Ismael

1

@DHlavaty您能解释使用.img-response和.center-block和仅使用.img-response并使用自动余量（如接受的答案所示）之间的区别吗？一种方法更健壮吗？

— user137717 2015年

1

如果您的图片应该是可点击的，则可能不希望使用此功能。也就是说，如果将它包装在一<a href="#"> </a>对中，则可点击区域将扩展为包含容器的整个宽度，该宽度可能比图像大很多。这可能会使单击他们认为是“空”空间的用户感到困惑。

— CXJ

108

仅将类添加center-block到映像，这也适用于Bootstrap 4：

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

注意：center-block即使在img-responsive使用时也可以使用

— 哈里·波什
source

6

最佳响应，但被低估了。这就是为什么要使用框架！

— Baumannzone

所以。太棒了谢谢

— AndrewLeonardi '17

它的工作..谢谢

— Dhiren Patel '18

31

.text-center如果您使用的是Bootstrap 3，请仅使用class。

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

注意：这不适用于img响应式

— Sai Kiran Sripada
source

1

问题是关于img-responsive

— Alexey Kosov，

对于可响应img的用户，请为可能在Google搜索中看到此内容的用户添加img-center（已在3.3.6中进行测试）

— DardanM

10

这应该使图像居中并使之响应。

<img src="..." class="img-responsive" style="margin:0 auto;"/>

— nPcomp
source

6

我建议使用更“抽象”的分类。添加一个新类“ img-center”，该类可以与.img-response类结合使用：

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

— 麦可
source

3

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

— 艾哈迈德
source

2

为什么display: table呢已经display: block足够margin: 0 auto上班了

— Bojangles

3

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

您可以在该标签之前加上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与整个变更的潜在影响有关。当然，center-block是最简单的解决方案。

— 简纳
source

该答案令人赞赏，当图像下方有文本时，将图像包装在行类中对于使图像居中至关重要。

— Glenn Plas

3

尝试使用此代码，因为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>

— 法西
source

3

尝试这个：

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

展开摘要

— 拉菲古伊斯兰教
source

3

只需将所有图像缩略图放在这样的行/列div中即可：

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

一切都会正常！

— 电力工程
source

2

为了增加已经给出的答案，将与img-responsive组合img-thumbnail设置display: block为display: inline block。

— 奥拉涅
source

2

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

。

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

— 用户名
source

0

您可以通过定义margin：0 auto来解决它

或者您也可以使用col-md-offset

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>

展开摘要

— 加内什·普塔（Ganesh Putta）
source

0

仅使用标准类应用于所有Booostrap对象的更准确方法是不设置上下边界（因为图像可以从父级继承这些边界），所以我一直在使用：

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

我也为此做了一个要点，因此，如果由于任何错误而将进行任何更改，更新版本将始终在此处：https : //gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

— 魔术师
source

0

到目前为止，最好的解决方案似乎是<img class="center-block" ... />。但是没有人提到它是如何center-block工作的。

以Bootstrap v3.3.6为例：

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

的默认值dispaly的<img>是inline。值block会将元素显示为块元素（如<p>）。它从新的一行开始，并占据整个宽度。这样，两个页边距设置使图像水平居中。

— 主题场
source