如何在引导程序 3+ 中的 col 元素中居中图像答案

【问题标题】：How to center an image within a col element in bootstrap 3+如何在引导程序 3+ 中的 col 元素中居中图像
【发布时间】：2014-03-16 02:37:42
【问题描述】：

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

此外，我尝试创建类 img-center 以使用 margin: 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;
}

【问题讨论】：

您错过了display: block; 声明。
在图像中添加“中心块”不起作用？

标签： css twitter-bootstrap-3

【解决方案1】：

<img> 不是块级元素。您需要将display: block; 设置为<img> 以使auto 左/右边距起作用。

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

或者使用.text-center 类作为parent 元素（本例中为列）以水平对齐<img> 等内联（-block）元素。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：