我使用Bootstrap 3做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小(500x500)，在浏览器中宽度为767像素。我想把图像放在屏幕的中央，但由于某种原因我不能。谁将帮助解决这个问题?
当前回答
<div class="text-align" style="text-align: center; ">
<img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>
你可以试试这个。
其他回答
只添加类中心块到一个图像，这适用于Bootstrap 4:
<img src="..." alt="..." class="center-block" />
注意:即使使用img-responsive, center-block也可以工作
这应该使图像居中，并使其响应。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
要添加到已经给出的答案，将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。
你可以通过定义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>
我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
