CSS 如何在 bootstrap 3+ 的 col 元素中居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21818246/
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
How to center an image within a col element in bootstrap 3+
提问by john k
I've been struggling to center a few images since moving to Bootstrap 3. Previously, I'd use pagination-centered class on the whole col element but that does not work now.
自从转移到 Bootstrap 3 以来，我一直在努力使一些图像居中。以前，我会在整个 col 元素上使用以分页为中心的类，但现在不起作用。
In addition, I've tried creating the class img-center to use margin: 0 auto (per the answer here) but that is not working either and I'm unsure why. If someone can point me in the right direction, that would be great.
此外，我尝试创建类 img-center 以使用 margin: 0 auto （根据此处的答案），但这也不起作用，我不确定为什么。如果有人能指出我正确的方向，那就太好了。
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4">
<img class="img-center" src="images/chart_bw.png">
<h3 class="text-center">Charts & data</h3>
<p class="text-center">Polish your analytical skills by picking apart Marimekko, bar charts, regressions & more</p>
</div><!-- col-md-4 -->
<div class="col-md-4 pagination-centered">
<img class="img-center" src="images/calculate_bw.png">
<h3 class="text-center">Mental math</h3>
<p class="text-center">Nail your mental math by practicing on unlimited case style math problems</p>
</div><!-- col-md-4 -->
<div class="col-md-4 pagination-centered">
<img class="img-center" src="images/lightbulb_bw.png">
<h3 class="text-center">Case problems</h3>
<p class="text-center">Structure problems and compare answers to suggestions from McKinsey consultants.</p>
</div><!-- col-md-4 -->
</div><!-- /.row -->
</div> <!-- col-md-10 -->
</div><!-- /.row -->
</div><!-- container -->
.img-center{
margin: 0 auto;
}
回答by Hashem Qolami
<img>is not a block-level element. You need to set display: block;to the <img>to get autoleft/right margins to work.
<img>不是块级元素。您需要设置display: block;为<img>使auto左/右页边距工作。
.img-center {
display: block;
margin: 0 auto;
}
Or use .text-centerclass for the parentelement (the column in this case) to align the inline(-block) elements such as <img>center horizontally.
或使用.text-center类的父元素（在这种情况下，列）对齐内联（嵌段）元件，例如<img>中心水平。
There's also a helper class called .center-block. You could use that to align the <img>element:
还有一个名为.center-block. 您可以使用它来对齐<img>元素：
<img class="center-block" src="images/lightbulb_bw.png">
回答by Hendra Nucleo
Actually Bootstrap have class ready for centering some element. Just add class "center-block" to the image class.
实际上，Bootstrap 已经准备好将某些元素居中。只需将类“center-block”添加到图像类。
<img class="img-center center-block" src="images/chart_bw.png">
Here the fiddle http://jsfiddle.net/nucleo1985/RVD48/1/
