Responsive image align center bootstrap 3

Question

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I w

Answer 1

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

Answer 2

You can use property of d-block here or you can use a parent div with property 'text-center' in bootstrap or 'text-align: center' in css.

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block:

<div>
    <img class="mx-auto d-block" src="...">  
</div>

Or leave it as inline-block and wrapped it in a div with .text-center:

<div class="text-center">
    <img src="...">  
</div>

Answer 3

There is .center-block class in Twitter Bootstrap 3 (Since v3.0.1), so use:

<img src="..." alt="..." class="img-responsive center-block" />

Answer 4

I would suggest a more "abstract" classification. Add a new class "img-center" which can be used in combination with .img-responsive class:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

Answer 5

So far the best solution to accept seems to be <img class="center-block" ... />. But no one has mentioned how center-block works.

Take Bootstrap v3.3.6 for example:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

The default value of dispaly for <img> is inline. Value block will display an element as a block element (like <p>). It starts on a new line, and takes up the whole width. In this way, the two margin settings let the image stay in the middle horizontally.

Answer 6

To add to the answers already given, having the img-responsive in combination with img-thumbnail will set display: block to display: inline block.