How to align an image dead center with bootstrap

Question

I'm using the bootstrap framework and trying to get an image centered horizontally without success..

I've tried various techniques such as splitting the the 12 grid system in 3 equal blocks e.g

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

What's the easiest method to get an image centered relative to the page?

And btw. you might want to have a look at the "Offseting columns"-section. http://twitter.github.com/bootstrap/scaffolding.html#gridSystem — mind85, Jun 29 '12 at 15:20
Someone has flagged this as not an answer, and I agree. Please add this as a comment, and your answer will be deleted shortly. — tckmn, Jun 28 '13 at 13:25
***If you have `img-responsive` class on your `img` tag, the image may not center.*** See [this SO answer](http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically/34560589#34560589) for an explanation of why using the bootstrap `center-block` class will solve that problem the bootstrap way. — cssyphus, Jan 01 '16 at 22:28
If are you using bootstrap, you can do it: stackoverflow.com/a/59469712/4654957 — Diego Venâncio, Dec 24 '19 at 13:48

score 292 · Accepted Answer · edited Jun 20 '20 at 09:12

292

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 13 '13 at 07:55

user3098434

2,968
1
12
3

1

the closing `` tag on the `container` div looks missing. this doesn't work for me on v3.3.7 – tarabyte Jan 09 '18 at 01:02
with bootstrap only ... you can just wrap the image in a row with **justify-content-md-center** like this:

– costargc Jan 21 '23 at 14:06

score 151 · Answer 2 · answered Mar 15 '13 at 15:04

151

The correct way of doing this is

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

answered Mar 15 '13 at 15:04

fabiangebert

2,623
2
22
25

25

this did not work for me when using it on this -http://startbootstrap.com/round-about .. but adding a class `center-block` to the `` elements worked.. – Sumeet Pareek Jun 20 '14 at 04:46
3

text-center will not work on images with img-responsive class but the comment above ( about center-block) solves this problem – trojan Jan 02 '15 at 15:52
An observation: In Bootstrap v3.1.0 it is possible to center img-responsive in column by adding text-center to column. This behavior is broken in v3.3.4. Very annoying. Css sucks. – f470071 May 29 '15 at 09:37
you should use center-block instead, as said in the docs: http://getbootstrap.com/css/#images-responsive – Nacho Jun 16 '17 at 14:35

Carol Skelly · Answer 3 · 2018-04-25T22:32:05.767

138

Update 2018

The center-block class no longer exists in Bootstrap 4. To center an image in Bootstrap 4, use mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

edited Apr 25 '18 at 22:32

answered Apr 08 '17 at 12:14

Carol Skelly

351,302
90
710
624

9

Just to add a little explanation to 'Update 2018': mx-auto sets the left and right margins to auto; d-block sets display:block – Michael Moriarty Jun 05 '18 at 16:34

score 86 · Answer 4 · answered Jan 10 '14 at 22:34

86

Add 'center-block' to image as class - no additional css needed

<img src="images/default.jpg" class="center-block img-responsive"/>

answered Jan 10 '14 at 22:34

adswebwork

5,245
3
19
9

8

Not sure why the -1 - THIS IS BY FAR THE BEST ANSWER! It uses the helper class build into Bootstrap. – user2562923 Feb 21 '14 at 19:21
4

In bootstrap 4, use `mx-auto` instead of `center-block` – Quantum7 Mar 13 '18 at 15:46

score 53 · Answer 5 · answered Oct 26 '12 at 15:04

53

Twitter bootstrap has a class that centers: .pagination-centered

It worked for me to do:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

The css for the class is:

.pagination-centered {
  text-align: center;
}

answered Oct 26 '12 at 15:04

David Silva Smith

11,498
11
67
91

20

Or maybe `.text-center` class? – trejder May 28 '13 at 10:53

score 37 · Answer 6 · edited Sep 01 '17 at 16:08

37

You could use the following. It supports Bootstrap 3.x above.

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

edited Sep 01 '17 at 16:08

Adrian

16,233
18
112
180

answered Aug 14 '16 at 05:51

Du-Lacoste

11,530
2
71
51

Thanks for this. Just what I needed today. – Ryan Wilson Jun 21 '18 at 13:04

My Head Hurts · Answer 7 · 2013-10-02T20:18:34.413

30

Assuming there is nothing else alongside the image, the best way is to use text-align: center in the img parent:

.row .span4 {
    text-align: center;
}

Edit

As mentioned in the other answers, you can add the bootstrap CSS class .text-center to the parent element. This does exactly the same thing and is available in both v2.3.3 and v3

edited Oct 02 '13 at 20:18

answered Jun 04 '12 at 10:55

My Head Hurts

37,315
16
75
117

Perfect - That does the job. But say i have a
– Fixer Jun 04 '12 at 11:08
1

Since .row in one of the core classes in twitter bootstrap. I would recommend to define a new class like on this page http://twitter.github.com/bootstrap/index.html with the class masthead. – baptme Jun 04 '12 at 12:27
1
@Fixer The `
– My Head Hurts Jun 04 '12 at 12:30
spent more than 2 or 3 hours and only this line... thanks! – alamin Nov 28 '17 at 18:24

LeRoy · Answer 8 · 2015-04-15T12:11:51.577

18

Works for me. try using center-block

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

edited Apr 15 '15 at 12:11

answered Mar 13 '15 at 08:44

LeRoy

4,189
2
35
46

score 7 · Answer 9 · edited May 23 '17 at 11:47

7

I need the same and here I found the solution:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

and to CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

edited May 23 '17 at 11:47

Community

1
1

answered Jun 03 '13 at 06:37

Shiv

1,269
11
20

I think bootstrap people need to add it to their css – Muhammad Ahsan Sep 15 '13 at 03:54
Hi, and thanks! I am using Bootstrap v3 now. I added this to my img container div, so i had to specify the exact width (at least) for my div to make things work. If you have no container or varying image sizes, add this class to your image. – Inan Oct 14 '13 at 18:18
lifesaver. I had a rather complex style-conflict situation and this is the only solution that worked. – galloper Nov 23 '22 at 11:41

score 1 · Answer 10 · answered Feb 05 '16 at 21:53

1

You can use margin property with the bootstrap img class.

.name-of-class .img-responsive { margin: 0 auto; }

answered Feb 05 '16 at 21:53

Venkatesh Rajavetrivel

114
1
4

score 1 · Answer 11 · edited Sep 21 '19 at 04:54

1

Seems we could use a new HTML5 feature if the browser version is not a problem:

in HTML files :

<div class="centerBloc">
  I will be in the center
</div>

And in CSS file, we write:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

And so the div could be perfectly center in browser.

edited Sep 21 '19 at 04:54

dtechplus

579
1
6
21

answered Mar 24 '16 at 09:37

Laurent

21
4

3

Your div's class is called .centerBloc and your css file show's body.loadingDiv ... – Martin Jan 25 '17 at 00:31
Fixed now @Martin – dtechplus Sep 21 '19 at 01:07

score 1 · Answer 12 · answered Jan 29 '18 at 14:44

1

I am using justify-content-center class to a row within a container. Works well with Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

answered Jan 29 '18 at 14:44

bassment

361
1
2
10

score 1 · Answer 13 · answered Apr 24 '22 at 18:10

1

Just use following bootstrap class to fix it

<img class="mx-auto d-block" src="../path/to/.." alt="Image">

answered Apr 24 '22 at 18:10

Khan Sunny

49
1
6

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 25 '22 at 01:58

score 1 · Answer 14 · answered Mar 09 '23 at 23:08

1

Update 2023. Bootstrap v5.

<img src="..." class="mx-auto d-block" alt="...">

answered Mar 09 '23 at 23:08

codingbear

296
5
18

score 0 · Answer 15 · answered Feb 21 '14 at 13:58

You should use

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

score 0 · Answer 16 · answered Mar 12 '18 at 17:31

0

I created this and added to Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

answered Mar 12 '18 at 17:31

Chris Catignani

5,040
16
42
49

score 0 · Answer 17 · answered May 26 '22 at 16:03

0

A lot of the above options didn't work for me. However, this worked!

<div class="container">
    <div class="row">
        <div class="col-sm-12" style="text-align: center;"><img class="center-block" src="img_path" /></div>
    </div>
</div>

answered May 26 '22 at 16:03

de.coding.myth

125
1
9

score 0 · Answer 18 · answered Sep 18 '22 at 06:50

0

IN Bootstarp 5.0

Use

.mx-auto .d-block

answered Sep 18 '22 at 06:50

Coderz Way

264
1
5

score -2 · Answer 19 · edited Jun 30 '12 at 13:03

-2

You could change the CSS of the previous solution as below:

.container, .row { text-align: center; }

This should center all the elements in the parent div as well.

edited Jun 30 '12 at 13:03

answered Jun 04 '12 at 11:43

Nandu

38
4

How to align an image dead center with bootstrap

19 Answers19

Linked

Related