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> <div> <div></div> <div><img src="logo.png" /></div> <div></div> </div> </div>

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

4

17 Answers

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> <div> <div></div> <div><img src="logo.png" /></div> <div></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

1

The correct way of doing this is

<div> <img ...> </div>
4

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="..."/>
1

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

<img src="images/default.jpg"/>
2

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

It worked for me to do:

<div> <div><img src="header.png" alt="header" /></div> </div>

The css for the class is:

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

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

<img src="..." alt="..." />
1

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

4

Works for me. try using center-block

<div> <div> <div></div> <div><img src="logo.png" /></div> <div></div> </div> </div>
0

I need the same and here I found the solution:

<div> <div> <div> This div will be centred. </div> </div> </div>

and to CSS:

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

You can use margin property with the bootstrap img class.

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

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

<div> <div> <img src="logo.png" /> </div> </div>

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

in HTML files :

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

2

Just use following bootstrap class to fix it

<img src="../path/to/.." alt="Image">
1

You should use 

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

I created this and added to Site.css.

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

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

<div> <div> <div><img src="img_path" /></div> </div> </div>

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.