关于html：响应式图像对齐中心引导3


Responsive image align center bootstrap 3

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

enter image description here。

相关讨论

twitter bootstrap 3中有.center-block类(从v3.0.1开始)，所以使用：

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

。

相关讨论

如果您使用的是bootstrap v3.0.1或更高版本，那么应该使用此解决方案。它不会使用自定义的CSS覆盖引导程序的样式，而是使用引导程序功能。

我的原始答案如下所示。

这是一个轻松愉快的解决办法。因为bootstrap中的.img-responsive已经设置了display: block，所以可以使用margin: 0 auto将图像居中：

1
2
3
.product .img-responsive {
    margin: 0 auto;
}
相关讨论

只将类center-block添加到映像中，这也适用于引导4：

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

注：即使使用img-responsive时，center-block也能工作。

相关讨论

如果使用bootstrap 3，只需使用.text-center类。

1
    <img src="..." alt="..."/>

注意：这不适用于img responsive

相关讨论

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

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

号

我建议更"抽象"的分类。添加新的"img center"类，可与.img responsive类结合使用：

1
2
3
4
// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}
相关讨论

1
2
3
4
5
6
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

号

相关讨论

您仍然可以使用img-responsive，而不影响这个样式类中的其他图像。

您可以在该标记前面加上id/div id/class节，以定义嵌套该img的顺序。这个习俗只有在那个地区才有效。

假设您有一个HTML区域定义为：

1
2
3
4
5
6
7
<section id="work">
   
       
            <img class="img-responsive" src="some_image.jpg">
       
   
</section>

那么，您的CSS可以是：

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

。

注：此答案与整体改变img-responsive的潜在影响有关。当然，center-block是最简单的解决方案。

相关讨论

试试这个：

1
2
3
4
5
6
7
8
9
10
.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
      margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

号

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

号

试试这段代码，它也适用于小图标与引导4，因为没有中心块类是引导4，所以试试这个方法，它将有帮助。您可以通过将.col-md-12设置为.col-md-8或.col-md-4来更改图像的位置，这取决于您。

1
           <img src="" class="img-thumbnail">

号

为了补充已经给出的答案，将img-responsive与img-thumbnail结合使用，将display: block设置为display: inline block。

1
    <img class="img-responsive tocenter" />

。

.

1
2
3
4
5
6
<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

。

只需将所有图像缩略图放在行/列分隔符中，如下所示：

1
  # your images here...

号

一切都会好起来的！

You can fix it with defining margin:0 auto

or you can use col-md-offset also

号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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 src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>


  Image


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




</body>
</html>

。

使用标准类对所有booostrap对象应用的更准确的方法是不设置上下边距(因为图像可以从父级继承这些内容)，所以我总是使用：

1
2
3
4
.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

号

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

到目前为止，最好的解决方案似乎是。但是没有人提到过center-block是如何工作的。

以bootstrap v3.3.6为例：

1
2
3
4
5
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

号

的dispaly的缺省值为inline。值block将元素显示为块元素(如

)。它从一条新线开始，占据整个宽度。这样，两个边距设置可以使图像水平地保持在中间。