html – Responsive image align center bootstrap 3

The Question :

427 people think this question is useful

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500×500) and a width of 767 pixels in the browser. I want to put the image in the center of the screen, but for some reason I can not. Who be will help solve the problem?

Screenshot of part of a product page with the product not centered underneath the headline

The Question Comments :
  • I like the design of your site and products – nice work :)
  • Another example of “Why we need place code into question body”.

The Answer 1

576 people think this answer is useful

If you’re using Bootstrap v3.0.1 or greater, you should use this solution instead. It doesn’t override Bootstrap’s styles with custom CSS, but instead uses a Bootstrap feature.

My original answer is shown below for posterity


This is a pleasantly easy fix. Because .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image:

.product .img-responsive {
    margin: 0 auto;
}

The Answer 2

1161 people think this answer is useful

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

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

The Answer 3

109 people think this answer is useful

Add only the class center-block to an image, this works with Bootstrap 4 as well:

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

Note: center-block works even when img-responsive is used

The Answer 4

31 people think this answer is useful

Just use .text-center class if you’re using Bootstrap 3.

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

Note: This doesn’t work with img-responsive

The Answer 5

11 people think this answer is useful

This should center the image and make it responsive.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

The Answer 6

6 people think this answer is useful

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

The Answer 7

4 people think this answer is useful

Simply put all the images thumbnails inside a row/col divs like this:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

and everything will work fine!

The Answer 8

3 people think this answer is useful
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

The Answer 9

3 people think this answer is useful

You can still work with img-responsive without impacting other images with this style class.

You can precede this tag with the section id/ div id/class to define a order within which this img is nested. This custom img-responsive will work only in that area.

Suppose you have a HTML area defined as:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

Then, your CSS can be:

section#work .img-responsive{
    margin: 0 auto;
}

Note: This answer is in relation to the potential impact of altering img-responsive as a whole. Of course, center-block is the simplest solution.

The Answer 10

3 people think this answer is useful

Try this code it will work for small icons too with bootstrap 4 because there is no center-block class is bootstrap 4 so try this method it will be helpful. You can change the position of the image by setting the .col-md-12 to .col-md-8 or .col-md-4, it’s upto you.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

The Answer 11

3 people think this answer is useful

Try this:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}
<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

The Answer 12

2 people think this answer is useful

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

The Answer 13

2 people think this answer is useful
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

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

The Answer 14

1 people think this answer is useful
<div class="text-align" style="text-align: center;  ">
    <img class="img-responsive" style="margin: auto;" alt="" src="images/x.png ?>">
</div>

you can try this.

The Answer 15

1 people think this answer is useful

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>

The Answer 16

0 people think this answer is useful

You can fix it with defining margin:0 auto

or you can use col-md-offset also

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>

The Answer 17

0 people think this answer is useful

The more exact way applied to all Booostrap objects using standard classes only would be to not set top and bottom margins (as image can inherit these from parent), so I am always using:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

I have also made a Gist for that, so if any changes will apply because of any bugs, update version will be always here: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

The Answer 18

0 people think this answer is useful

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.

Add a Comment