如何在bootstrap 3中的col元素中居中放置图像

Question

自从转到Bootstrap 3以来，我一直在努力使一些图像居中。以前，我会在整个coll元素上使用以分页为中心的类，但现在不起作用了。

此外，我尝试创建类img中心来使用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;
}

Answer 1

实际上Bootstrap已经为某些元素的居中做好了准备。只需将类“cent-block”添加到图像类中。

<img class="img-center center-block" src="images/chart_bw.png">

这是小提琴http://jsfiddle.net/nucleo1985/RVD48/1/

Answer 2

<代码>

.img-center {
    display: block;
    margin: 0 auto;
}

或使用<代码>。父元素（本例中的列）的文本中心类，以对齐内联（-块）元素，例如

还有一个名为的助手类。中心块。您可以使用它来对齐<代码>

<img class="center-block" src="images/lightbulb_bw.png">