2

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.

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;
}
Community
  • 1
  • 1
john k
  • 1,086
  • 4
  • 14
  • 19

2 Answers2

12

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

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.

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">
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
4

Actually Bootstrap have class ready for centering some element. Just add class "center-block" to the image class.

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

Here the fiddle http://jsfiddle.net/nucleo1985/RVD48/1/

Hendra Nucleo
  • 591
  • 4
  • 18