How to center an image within a col element in bootstrap 3+
css, twitter-bootstrap-3
Solution
`<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">
Problem
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; } ```