如何在bootstrap 3+中的col元素中居中图像 [英] How to center an image within a col element in bootstrap 3+

问题描述

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

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.

此外，我尝试创建类img-center以使用margin：0 auto（每个答案在这里），但是这不工作，我不确定为什么。如果有人能指出我的方向，这将是巨大的。

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.

<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;
}

推荐答案

< img> 不是块级元素。您需要将 display：block; 设置为< img> ，以获取 / code>左/右边距工作。

<img> is not a block-level element. You need to set display: block; to the <img> to get auto left/right margins to work.

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

或使用 .text-center 类元素（在这种情况下为列），以使内联（-block）元素（如< img> ）水平对齐。

Or use .text-center class for the parent element (the column in this case) to align the inline(-block) elements such as <img> center horizontally.

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

There's also a helper class called .center-block. You could use that to align the <img> element:

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

这篇关于如何在bootstrap 3+中的col元素中居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！