Html 响应式图像对齐中心引导程序 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18462808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive image align center bootstrap 3
提问by Konstantin Rusanov
I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the screen, but for some reason I can not. Who be will help solve the problem?
我使用 Bootstrap 3 做一个目录。当在平板电脑上显示时，产品图像看起来很难看，因为它们的尺寸很小 (500x500)，并且在浏览器中的宽度为 767 像素。我想将图像放在屏幕中央，但由于某种原因我不能。谁来帮助解决问题？
回答by DHlavaty
There is .center-blockclass in Twitter Bootstrap 3 (Since v3.0.1), so use:
.center-blockTwitter Bootstrap 3 中有类（从 v3.0.1 开始），所以使用：
<img src="..." alt="..." class="img-responsive center-block" />
回答by Bojangles
If you're using Bootstrap v3.0.1 or greater, you should use this solutioninstead. It doesn't override Bootstrap's styles with custom CSS, but instead uses a Bootstrap feature.
如果您使用的是 Bootstrap v3.0.1 或更高版本，则应改用此解决方案。它不会使用自定义 CSS 覆盖 Bootstrap 的样式，而是使用 Bootstrap 功能。
My original answer is shown below for posterity
我的原始答案如下所示
This is a pleasantly easy fix. Because .img-responsivefrom Bootstrap already sets display: block, you can use margin: 0 autoto center the image:
这是一个令人愉快的简单修复。因为.img-responsive从 Bootstrap 已经设置了display: block，您可以使用margin: 0 auto将图像居中：
.product .img-responsive {
margin: 0 auto;
}
回答by Harry Bosh
Add only the class center-blockto an image, this works with Bootstrap 4 as well:
仅将类添加center-block到图像，这也适用于 Bootstrap 4：
<img src="..." alt="..." class="center-block" />
Note: center-blockworks even when img-responsiveis used
注意：center-block即使img-responsive使用也有效
回答by Sai Kiran Sripada
Just use .text-centerclass if you're using Bootstrap 3.
.text-center如果您使用的是 Bootstrap 3，只需使用class。
<div class="text-center">
<img src="..." alt="..."/>
</div>
Note: This doesn't work with img-responsive
注意：这不适用于 img-responsive
回答by nPcomp
This should center the image and make it responsive.
这应该使图像居中并使其具有响应性。
<img src="..." class="img-responsive" style="margin:0 auto;"/>
回答by Michael
I would suggest a more "abstract" classification. Add a new class "img-center" which can be used in combination with .img-responsive class:
我会建议一个更“抽象”的分类。添加一个新类“img-center”，它可以与 .img-responsive 类结合使用：
// Center responsive images
.img-responsive.img-center {
margin: 0 auto;
}
回答by Ahmed
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}
回答by Rafiqul Islam
Try this:
尝试这个：
.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>回答by faseeh
Try this code it will work for small icons too with bootstrap 4 because there is no center-block class is bootstrap 4 so try this method it will be helpful. You can change the position of the image by setting the .col-md-12to .col-md-8or .col-md-4, it's upto you.
试试这个代码，它也适用于引导程序 4 的小图标，因为引导程序 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>
回答by KannarKK
You can still work with img-responsivewithout impacting other images with this style class.
您仍然可以img-responsive使用此样式类在不影响其他图像的情况下使用。
You can precede this tag with the section id/ div id/class to define a order within which this imgis nested. This custom img-responsivewill work only in that area.
你可以在这个标签前面加上 id/div id/class 部分来定义img嵌套的顺序。此习俗img-responsive仅适用于该区域。
Suppose you have a HTML area defined as:
假设您有一个 HTML 区域定义为：
<section id="work">
<div class="container">
<div class="row">
<img class="img-responsive" src="some_image.jpg">
</div>
</div>
</section>
Then, your CSS can be:
然后，您的 CSS 可以是：
section#work .img-responsive{
margin: 0 auto;
}
Note: This answer is in relation to the potential impact of altering img-responsiveas a whole. Of course, center-blockis the simplest solution.
注意：此答案img-responsive与整体更改的潜在影响有关。当然center-block是最简单的解决方法。
