Question

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

enter image description here

Answer 1

Twitter Bootstrap 3（自v3.0.1 ）中有.center-block个类，所以请使用：

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

Answer 2

如果您使用的是Bootstrap v3.0.1或更高版本，则应使用this solution代替。它不会使用自定义CSS覆盖Bootstrap的样式，而是使用Bootstrap功能。

我的原始答案如下所示为后代

这是一个非常简单的解决方案。由于Bootstrap中的.img-responsive已设置display: block，因此您可以使用margin: 0 auto将图像居中：

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

Answer 3

只将类center-block添加到图像中，这也适用于Bootstrap 4：

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

注意：center-block即使在使用img-responsive

时也能正常工作

Answer 4

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

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

注意：这不适用于img-responsive

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

您仍然可以使用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的潜在影响有关。当然，center-block是最简单的解决方案。

Answer 9

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 10

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

Answer 11

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

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

Answer 12

尝试使用此代码，它也适用于带有bootstrap 4的小图标，因为没有中心块类是bootstrap 4所以尝试这种方法会有所帮助。您可以通过将Wrapper设置为.col-md-12或.col-md-8来改变图像的位置，它就是你的。

.col-md-4

Answer 13

您可以在此处使用 d-block 的属性，也可以在 bootstrap 或'text-align：center'中使用属性为'text-center'的父div在 css 中。

默认情况下，图像显示为行内块，您需要将其显示为块，以便使用.mx-auto将其居中。可以使用内置的 .d-block ：

<div>
    <img class="mx-auto d-block" src="...">  
</div>

或者将其保留为内联块，并使用 .text-center 将其包装在div中：

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

Answer 14

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

您可以尝试这个。

Answer 15

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

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

一切都会正常！

Answer 16

到目前为止，最好的解决方案似乎是@SpringBootApplication @EnableSidecar @EnableDiscoveryClient public class SidecarApplication {...}。但是没有人提到<img class="center-block" ... />的工作原理。

以Bootstrap v3.3.6为例：

center-block

.center-block { display: block; margin-right: auto; margin-left: auto; }的{{1}}的默认值为dispaly。值<img>将元素显示为块元素（如inline）。它从新的一行开始，并占据整个宽度。这样，两个边距设置使图像水平居中。

Answer 17

使用标准类应用于所有Booostrap对象的更精确的方法是不设置顶部和底部边距（因为图像可以从父级继承这些边框），所以我一直在使用：

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

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

Answer 18

您可以使用定义边距修复它：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>

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

18 个答案: