响应式图像alignment中心引导3
我使用Bootstrap 3做目录。当在平板电脑上显示时，产品图像看起来很丑，因为它们的尺寸很小（500×500），浏览器的宽度是767像素。 我想把图像放在屏幕的中心，但由于某种原因，我不能。 谁会帮助解决问题？
如果您使用的是Bootstrap v3.0.1或更高版本，则应该使用此解决scheme 。 它不会覆盖自定义CSS的Bootstrap样式，而是使用Bootstrapfunction。
我的原始答案如下所示为后代
这是一个愉快的简单的修复。 因为Bootstrap的.img-responsive已经设置了display: block ，所以可以使用margin: 0 auto来居中显示图像：
.product .img-responsive { margin: 0 auto; }
在Twitter Bootstrap 3（ 自v3.0.1以来 ）中有.center-block类，所以使用：
<img src="..." alt="..." class="img-responsive center-block" />
只将类center-block添加到图像，这也适用于Bootstrap 4：
<img src="..." alt="..." class="center-block" />
注意：使用img-responsive时， center-block不起作用
如果您使用Bootstrap 3，只需使用.text-center类。
<div class="text-center"> <img src="..." alt="..."/> </div>
注意：这不适用于img-responsive
我会build议一个更“抽象”的分类。 添加一个新的类“img-center”，可以与.img-responsive类结合使用：
// Center responsive images .img-responsive.img-center { margin: 0 auto; }
这应该使图像居中，并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
您仍然可以使用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是最简单的解决scheme。
@media (max-width: 767px) { img { display: table; margin: 0 auto; } }
为了增加已经给出的答案，将img-responsive与img-thumbnail结合起来将设置display: block来display: inline block 。
<div class="col-md-12 text-center"> <img class="img-responsive tocenter" /> </div>
。
<style> .tocenter { margin:0 auto; display: inline; } </style>
试试这个代码它也能用于小图标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>
尝试这个：
.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>
您可以通过定义边距来修复它：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="bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> </div> </div> </div> </body> </html>
应用于所有使用标准类的Booostrap对象的更准确的方法是不设置顶部和底部边距（因为图像可以从父类inheritance），所以我总是使用：
.text-center .img-responsive { margin-left: auto; margin-right: auto; }
我也做了一个要点，所以如果有任何更改将适用于任何错误，更新版本将始终在这里： https ： //gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
