twitter-bootstrap 在 Bootstrap 中将响应式图像水平居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30103364/
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
Horizontally center a responsive image in Bootstrap
提问by Jabran Rafique
If an image with .img-responsiveclass has less width than the container width then it displays as aligned to left. Adding .text-centerto parent element does not seem to work. Here is an example:
如果具有.img-responsive类的图像的宽度小于容器宽度，则它显示为左对齐。添加.text-center到父元素似乎不起作用。下面是一个例子：
<div class="col-sm-12 text-center">
<img src="path/to/image.jpg" alt="Example Image" class="img-responsive" />
</div>
回答by BENARD Patrick
If you really want to follow the twitter bootstrap synthax, you should use the center-blockclass as explained in the documentation.
如果你真的想遵循 twitter bootstrap synthax，你应该使用center-block文档中解释的类。
Kind of code:
代码类型：
<img class="center-block" src="something.xxx" alt="xxx">
回答by Jabran Rafique
This is because .img-responsive classhas its CSS displayproperty set to block. Adding .img-responsive { display: inline-block; }in user stylesheet will solve the issue by overriding the original value and image will display as centred.
这是因为.img-responsive class它的 CSSdisplay属性设置为block. 添加.img-responsive { display: inline-block; }用户样式表将通过覆盖原始值来解决问题，图像将显示为居中。
Here is CSS:
这是CSS：
.img-responsive {
display: inline-block;
}
Here is HTML:
这是 HTML：
<div class="col-sm-12 text-center">
<img src="path/to/image.jpg" alt="Example image" class="img-responsive" />
</div>
回答by Tushar
You can use text-alignproperty on it's parent element
您可以text-align在其父元素上使用属性
.text-centre {
text-align: center;
}
