我使用 Bootstrap 3 做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小 (500x500) 并且在浏览器中的宽度为 767 像素。我想把图像放在屏幕中央，但由于某种原因我不能。谁来帮助解决问题？
问问题
891440 次
19 回答
1175
.center-blockTwitter Bootstrap 3 中有类（从 v3.0.1开始），所以使用：
<img src="..." alt="..." class="img-responsive center-block" />
于 2013-12-05T10:00:10.830 回答
586
如果您使用的是 Bootstrap v3.0.1 或更高版本，则应改用此解决方案。它不会使用自定义 CSS 覆盖 Bootstrap 的样式，而是使用 Bootstrap 功能。
我的原始答案如下所示，以供后代使用
这是一个令人愉快的简单修复。因为.img-responsive从 Bootstrap 已经设置display: block，您可以使用margin: 0 auto来居中图像：
.product .img-responsive {
margin: 0 auto;
}
于 2013-08-27T10:25:05.043 回答
113
仅将类添加center-block到图像中，这也适用于 Bootstrap 4：
<img src="..." alt="..." class="center-block" />
注意：center-block即使在使用时img-responsive也有效
于 2016-03-17T23:39:53.267 回答
36
.text-center如果您使用的是 Bootstrap 3，请使用类。
<div class="text-center">
<img src="..." alt="..."/>
</div>
注意：这不适用于 img-responsive
于 2013-12-28T19:36:27.970 回答
11
这应该使图像居中并使其具有响应性。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
于 2017-02-21T03:22:57.140 回答
6
我会建议一个更“抽象”的分类。添加一个新类“img-center”，它可以与 .img-responsive 类结合使用：
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
于 2013-11-27T15:01:53.703 回答
4
只需将所有图像缩略图放在 row/col div 中，如下所示：
<div class="row text-center">
<div class="col-12">
# your images here...
</div>
</div>
一切都会好起来的！
于 2018-11-30T13:29:38.803 回答
3
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
于 2013-08-27T10:29:11.483 回答
3
试试这个代码，它也适用于 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>
于 2016-11-23T16:18:50.697 回答
3
您仍然可以img-responsive使用此样式类在不影响其他图像的情况下使用。
img你可以在这个标签之前加上部分 id/div id/class 来定义一个嵌套的顺序。这种习俗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是最简单的解决方案。
于 2015-11-05T15:34:44.223 回答
3
您可以在此处使用d-block的属性，也可以在bootstrap中使用具有属性“text-center”或在css中使用“text-align: center”的父 div 。
图像默认显示为 inline-block，您需要将其显示为块以便使用 .mx-auto 使其居中。这可以通过内置的.d-block来完成：
<div>
<img class="mx-auto d-block" src="...">
</div>
或者将其保留为 inline-block 并将其包装在带有.text-center的 div 中：
<div class="text-center">
<img src="...">
</div>
于 2020-10-30T12:19:51.713 回答
3
尝试这个：
.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>于 2017-08-02T10:10:42.433 回答
2
要添加到已经给出的答案，将 与img-responsive结合img-thumbnail设置display: block为display: inline block。
于 2013-11-08T12:22:49.393 回答
2
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>
.
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
于 2015-02-19T17:21:56.850 回答
2
<div class="text-align" style="text-align: center; ">
<img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>
你可以试试这个。
于 2020-06-24T16:29:51.833 回答
0
仅使用标准类应用于所有 Booostrap 对象的更准确方法是不设置顶部和底部边距（因为图像可以从父级继承这些），所以我总是使用：
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}
我也为此做了一个要点，所以如果由于任何错误而进行任何更改，更新版本将始终在这里： https ://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
于 2017-01-04T09:02:18.747 回答
0
您可以通过定义 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-14T12:34:19.760 回答
0
到目前为止，接受的最佳解决方案似乎是<img class="center-block" ... />. 但是没有人提到它是如何center-block工作的。
以 Bootstrap v3.3.6 为例：
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
dispalyfor<img>的默认值为inline. Valueblock将元素显示为块元素（如<p>）。它从一个新行开始，占据整个宽度。这样，两个边距设置让图像水平停留在中间。
于 2018-07-30T20:43:03.767 回答
0
2021.09 来自一个项目：
<div class="d-flex" style="height: 60px; width: 60px;">
<img alt="ddd" src="myurl" class="m-auto"/>
</div>
于 2021-09-11T11:56:31.677 回答