444

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

Improve this question
3
  • 6
    I like the design of your site and products - nice work :)
    – Bojangles
    Commented Aug 27, 2013 at 10:25
  • 7
    Another example of "Why we need place code into question body".
    – LEQADA
    Commented Oct 25, 2015 at 8:02
  • Try this Boostrap Class in parent element: img d-flex justify-content-center border border-light p-5
    – JWC May
    Commented Feb 9, 2021 at 11:37

19 Answers 19

Reset to default
1188

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

<img src="..." alt="..." class="img-responsive center-block" />
Improve this answer
5
  • 30
    This should be the accepted answer, as you do not need to add any CSS to use it.
    – user2602152
    Commented Jan 3, 2014 at 15:22
  • 17
    class="img-responsive" style="margin: 0 auto;" works for me class="img-responsive center-block" does not (bootstrap 3, but a version a few month old)
    – mxro
    Commented Jan 9, 2014 at 3:46
  • 9
    Align center does not work when img-responsive is used.
    – Ismael
    Commented Jul 1, 2014 at 12:05
  • 1
    @DHlavaty can you explain the difference between using .img-responsive AND .center-block and just using .img-responsive with an auto margin like the accepted answer suggests? is one method more robust?
    – user137717
    Commented Mar 16, 2015 at 22:57
  • 1
    You might not want to use this if your image is supposed to be clickable. That is, if it is wrapped inside a <a href="#"> </a> pair, the clickable area will get expanded to the full width of the enclosing container which might be quite a bit larger than your image. This may confuse users who click on what they think is "empty" space.
    – CXJ
    Commented Aug 1, 2017 at 0:23
589

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;
}
Improve this answer
4
  • 37
    It's probably better to create a new class with margin: 0 auto, rather than changing .img-responsive.
    – knite
    Commented Sep 17, 2013 at 21:02
  • 4
    That's a thought, although personally I can't think of anywhere I'd want a responsive image not centered, especially with this design. It all depends on the use case, and what's going to happen in the future
    – Bojangles
    Commented Sep 17, 2013 at 21:12
  • Please see this answer if you are using Bootstrap v4 or higher: stackoverflow.com/a/43293957/4102515
    – snorberhuis
    Commented Aug 6, 2018 at 21:07
  • Perfect answer, thank.
    – Wowo Ot
    Commented Aug 13, 2024 at 7:29
115

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

Improve this answer
0
38

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

Improve this answer
2
  • 1
    The question is about img-responsive
    – Alexey Kosov
    Commented Nov 25, 2015 at 12:30
  • For img-responsive add img-center (tested on 3.3.6) for those that might see this on google searches
    – DardanM
    Commented Jun 12, 2016 at 23:19
11

This should center the image and make it responsive.

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

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;
}
Improve this answer
0
4

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!

Improve this answer
4

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>
Improve this answer
3

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.

Improve this answer
1
  • This answer is under appreciated, wrapping the image in the row class is crucial in centering the image when there is a text under the image.
    – Glenn Plas
    Commented Jul 7, 2016 at 12:13
3

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>
Improve this answer
3

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>

Improve this answer
2 
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
Improve this answer
1
  • 4
    Why display: table? It's already display: block which is enough to get margin: 0 auto to work
    – Bojangles
    Commented Aug 27, 2013 at 10:29
2

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

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

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
Improve this answer
2 
<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.

Improve this answer
0

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>

Improve this answer
0

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

Improve this answer
0

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.

Improve this answer
1
  • also float:none requires
    – Khalid Lakhani
    Commented Jul 29, 2023 at 17:11
0

2021.09 from a project:

                    <div class="d-flex" style="height: 60px; width: 60px;">
                            <img alt="ddd" src="myurl" class="m-auto"/>
                    </div>
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.