CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrapalignment
Konstantin Rusanov
Konstantin Rusanov

Reputation: 6554

Responsive image align center bootstrap 3

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

Upvotes: 444

Views: 921655

Answers (19)

CodeToLife
CodeToLife

Reputation: 4171

2021.09 from a project:

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

Upvotes: 0

Sourabh Potnis
Sourabh Potnis

Reputation: 350

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>

Upvotes: 4

riverhorse
riverhorse

Reputation: 151

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

Upvotes: 2

Power Engineering
Power Engineering

Reputation: 722

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!

Upvotes: 4

Harry Bosh
Harry Bosh

Reputation: 3790

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

Upvotes: 115

themefield
themefield

Reputation: 4265

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.

Upvotes: 0

nPcomp
nPcomp

Reputation: 9973

This should center the image and make it responsive.

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

Upvotes: 11

Rafiqul Islam
Rafiqul Islam

Reputation: 961

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>

Upvotes: 3

LordMagik
LordMagik

Reputation: 43

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

Upvotes: 0

faseeh
faseeh

Reputation: 131

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>

Upvotes: 3

Bojangles
Bojangles

Reputation: 101533

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

Upvotes: 589

Ganesh Putta
Ganesh Putta

Reputation: 2681

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>

Upvotes: 0

KannarKK
KannarKK

Reputation: 1623

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.

Upvotes: 3

Sai Kiran Sripada
Sai Kiran Sripada

Reputation: 1147

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

Upvotes: 38

user956584
user956584

Reputation: 5558

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

.

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

Upvotes: 2

DHlavaty
DHlavaty

Reputation: 13088

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

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

Upvotes: 1188

Michael
Michael

Reputation: 3238

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

Upvotes: 7

M. Oranje
M. Oranje

Reputation: 781

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

Upvotes: 2

Ahmed
Ahmed

Reputation: 45

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

Upvotes: 2

Related Questions