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

I like the design of your site and products - nice work `:)` — Bojangles, Aug 27 '13 at 10:25
Another example of "Why we need place code into question body". — LEQADA, Oct 25 '15 at 08:02
Try this Boostrap Class in parent element: img d-flex justify-content-center border border-light p-5 — JWC May, Feb 09 '21 at 11:37

score 1167 · Answer 1 · edited Mar 09 '14 at 13:07

1167

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

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

edited Mar 09 '14 at 13:07

Hashem Qolami

88,138
25
132
151

answered Dec 05 '13 at 10:00

DHlavaty

12,163
3
16
25

28

This should be the accepted answer, as you do not need to add any CSS to use it. – user2602152 Jan 03 '14 at 15:22
16

`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 Jan 09 '14 at 03:46
9

Align center does not work when img-responsive is used. – Ismael Jul 01 '14 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 Mar 16 '15 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 ` ` 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 Aug 01 '17 at 00:23

score 581 · Accepted Answer · edited May 23 '17 at 12:26

581

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

edited May 23 '17 at 12:26

Community

1
1

answered Aug 27 '13 at 10:25

Bojangles

91,543
47
160
197

36

It's probably better to create a new class with `margin: 0 auto`, rather than changing .img-responsive. – knite Sep 17 '13 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 Sep 17 '13 at 21:12
Please see this answer if you are using Bootstrap v4 or higher: https://stackoverflow.com/a/43293957/4102515 – snorberhuis Aug 06 '18 at 21:07

Harry Bosh · Answer 3 · 2018-08-23T07:56:55.077

109

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

edited Aug 23 '18 at 07:56

answered Mar 17 '16 at 23:39

Harry Bosh

2,630
1
27
29

6

Best response, but underrated. That's why you use a framework! – Baumannzone Jun 26 '16 at 21:35
So. Fantastic. Thank you – AndrewLeonardi Jan 20 '17 at 16:20
Its Work..Thanks – Dhiren Patel Mar 30 '18 at 09:05

Sai Kiran Sripada · Answer 4 · 2015-05-02T14:57:46.783

35

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

edited May 02 '15 at 14:57

answered Dec 28 '13 at 19:36

Sai Kiran Sripada

1,089
3
15
30

1

The question is about `img-responsive` – Alexey Kosov Nov 25 '15 at 12:30
For img-responsive add img-center (tested on 3.3.6) for those that might see this on google searches – DardanM Jun 12 '16 at 23:19

nPcomp · Answer 5 · 2018-06-05T15:22:03.870

11

This should center the image and make it responsive.

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

edited Jun 05 '18 at 15:22

answered Feb 21 '17 at 03:22

nPcomp

5,621
1
37
45

score 6 · Answer 6 · answered Nov 27 '13 at 15:01

6

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

answered Nov 27 '13 at 15:01

Michael

2,086
2
25
32

score 4 · Answer 7 · answered Nov 30 '18 at 13:29

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!

answered Nov 30 '18 at 13:29

Power Engineering

635
12
22

score 3 · Answer 8 · answered Aug 27 '13 at 10:29

3

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

answered Aug 27 '13 at 10:29

Ahmed

47
2

2

Why `display: table`? It's already `display: block` which is enough to get `margin: 0 auto` to work – Bojangles Aug 27 '13 at 10:29

score 3 · Answer 9 · answered Nov 05 '15 at 15:34

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.

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, Jul 07 '16 at 12:13

score 3 · Answer 10 · edited Nov 23 '16 at 16:41

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>

score 3 · Answer 11 · answered Aug 02 '17 at 10:10

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>

score 2 · Answer 12 · answered Nov 08 '13 at 12:22

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.

answered Nov 08 '13 at 12:22

M. Oranje

751
5
13

score 2 · Answer 13 · answered Feb 19 '15 at 17:21

2

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

.

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

answered Feb 19 '15 at 17:21

user956584

4,532
2
34
46

score 1 · Answer 14 · answered Jun 24 '20 at 16:29

1

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

answered Jun 24 '20 at 16:29

riverhorse

131
9

score 1 · Answer 15 · answered Oct 30 '20 at 12:19

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>

score 0 · Answer 16 · edited Jun 20 '20 at 09:12

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>

score 0 · Answer 17 · answered Jan 04 '17 at 09:02

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

score 0 · Answer 18 · answered Jul 30 '18 at 20:43

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.

Responsive image align center bootstrap 3

18 Answers18

Linked

Related