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

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

当前回答

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

以Bootstrap v3.3.6为例:

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

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

2018-07-30 20:43:03

其他回答

简单地把所有的图片缩略图放在row/col div中，就像这样:

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

一切都会好起来的!

2018-11-30 13:29:38

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

我最初的答案如下，供后人参考

这是一个很容易解决的问题。因为.img-responsive from Bootstrap已经设置了display: block，你可以使用margin: 0 auto将图像居中:

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

2013-08-27 10:25:05

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

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

注意:这对img-responsive不起作用

2013-12-28 19:36:27

2021.09来自一个项目:

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>

2021-09-11 11:56:31

你可以通过定义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>

2016-07-14 12:34:19

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

推荐文章

最新文章

标签