How to Center an Image Within a Col Element in Bootstrap 3+

How To Center Image Within Bootstrap Column

Add display: block and margin: auto; it will do the trick

.services-section img {
    width: 90px;
    height: 90px;
    margin: auto;    
    display: block;
}

Responsive image align center bootstrap 3

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

How can I center an image in Bootstrap?

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 class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

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

<div class="container">
    <div class="row">
        <div class="col-4">
          <div class="text-center">
            <img src="..."> 
          </div>     
        </div>
    </div>
</div>

I made a fiddle showing both ways.
They are documented here as well.

How to center an image within a col element in bootstrap 3+

<img> is not a block-level element. You need to set display: block; to the <img> to get auto left/right margins to work.

.img-center {
    display: block;
    margin: 0 auto;
}

Or use .text-center class for the parent element (the column in this case) to align the inline(-block) elements such as <img> center horizontally.

There's also a helper class called .center-block. You could use that to align the <img> element:

<img class="center-block" src="images/lightbulb_bw.png">

Centering the image in Bootstrap

Update 2018

Bootstrap 2.x

You could create a new CSS class such as:

.img-center {margin:0 auto;}

And then, add this to each IMG:

 <img src="images/2.png" class="img-responsive img-center">

OR, just override the .img-responsive if you're going to center all images..

 .img-responsive {margin:0 auto;}

Demo: http://bootply.com/86123

Bootstrap 3.x

EDIT - With the release of Bootstrap 3.0.1, the center-block class can now be used without any additional CSS..

 <img src="images/2.png" class="img-responsive center-block">

---

Bootstrap 4

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.

<div class="container">
    <div class="row">
        <div class="col-12">
            <img class="mx-auto d-block" src="//placehold.it/200">  
        </div>
    </div>
    <div class="row">
        <div class="col-12 text-center">
            <img src="//placehold.it/200">  
        </div>
    </div>
</div>

Bootsrap 4 - center image demo

Bootstrap: how to truly center an image in a column?

Or you can do it with flexbox.

Add to your col-md-6

display: flex;
align-items: center;
justify-content: center

Bootstrap 3 center image

You are using class img-responsive which adds display:block to your image and can't be centered using text-align:center. You can center block elements of known width with margin:0 auto. Take a look at fiddle https://jsfiddle.net/DTcHh/9397/

How to align an image dead center with bootstrap

Twitter Bootstrap v3.0.3 has a class: center-block

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

Just need to add a class .center-block in the img tag, looks like this

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap already has css style call .center-block

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

You can see a sample from here

How can I align an image to the center in a Bootstrap column?

Add the text-center class to your column divs

<div class="col-md-4 col-sm-4 col-xs-4 text-center">

---

Related Topics