How to align an image dead center with bootstrap
CssTwitter BootstrapCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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
Solution 2 - Css
The correct way of doing this is
<div class="row text-center">
<img ...>
</div>
Solution 3 - Css
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"/>
Solution 4 - Css
Add 'center-block' to image as class - no additional css needed
<img src="images/default.jpg" class="center-block img-responsive"/>
Solution 5 - Css
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;
}
Solution 6 - Css
You could use the following. It supports Bootstrap 3.x above.
<img src="..." alt="..." class="img-responsive center-block" />
Solution 7 - Css
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
Solution 8 - Css
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>
Solution 9 - Css
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;
}
Solution 10 - Css
You can use margin property with the bootstrap img class.
.name-of-class .img-responsive { margin: 0 auto; }
Solution 11 - Css
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.
Solution 12 - Css
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>
Solution 13 - Css
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;
}
}
Solution 14 - Css
I created this and added to Site.css.
.img-responsive-center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;
}
Solution 15 - Css
Just use following bootstrap class to fix it
<img class="mx-auto d-block" src="../path/to/.." alt="Image">
Solution 16 - Css
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.