Question

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

此外，我已尝试创建类img-center以使用保证金：0 auto（per the answer here）但这也不起作用，我不确定原因。如果有人能指出我正确的方向，那就太好了。

<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

<img>不是块级元素。您需要将display: block;设置为<img>才能使auto左/右边距生效。

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

或者使用.text-center类作为父元素（在本例中为列）来对齐内联（-block）元素，例如<img>水平居中。

还有一个名为.center-block的辅助类。您可以使用它来对齐<img>元素：

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

Answer 2

实际上，Bootstrap已准备好将一些元素集中在一起。只需将类“center-block”添加到图像类中即可。

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

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

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

2 个答案: