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

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

产品页面的部分截图，其中产品不在标题 . quot

905297 次浏览
小开
最佳答案

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

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

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

.product .img-responsive {
margin: 0 auto;
}
小开 
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
小开

要添加到已经给出的答案，将img-responsive与img-thumbnail结合使用将会将display: block设置为display: inline block。

小开

我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:

// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
小开

在Twitter Bootstrap 3 (自从v3.0.1)中有.center-block类，所以使用:

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

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

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

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

小开 
<div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>

．

<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>
小开

你仍然可以在不影响其他图像的情况下使用img-responsive。

你可以在这个标记前面加上section 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是最简单的解决方案。

小开

只向图像添加类center-block，这也适用于Bootstrap 4:

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

注意:即使使用了img-responsive， center-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>

小开

尝试这段代码，它将工作的小图标也与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>
小开

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

.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}
我也做了一个Gist，所以如果任何变化将适用于任何bug，更新版本将永远在这里: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66 < / p >
小开

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

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

试试这个:

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

小开

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

以Bootstrap v3.3.6为例:

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

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

小开

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

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

一切都会好起来的!

小开 
<div class="text-align" style="text-align: center;  ">
<img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>

你可以试试这个。

小开

你可以在这里使用属性d区，或者你可以在引导中使用属性'text-center'或在css中使用属性'text-align: center'的父div。

图像默认显示为内联块，您需要将其显示为块以便以.mx-auto居中。这可以用内置的.d-block来完成:

<div>
<img class="mx-auto d-block" src="...">
</div>

或者将其保留为内联块，并使用.text-center将其包装在div中:

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

2021.09来自一个项目:

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

提交答案