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   lt div class  container  gt       lt div class  row  gt         lt div class  span4  gt  lt  div gt         lt div class  span4  gt  lt img src  logo png    gt  lt  div gt         lt div class  span4  gt  lt  div gt       lt  div gt   lt  div gt    What s the easiest method to get an image centered relative to the page

User · Answer

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

User · Answer

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

User · Answer

Add  center-block  to image as class - no additional css needed   lt img src  images default jpg  class  center-block img-responsive   gt

User · Answer

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

User · Answer

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  lt div class  quot container quot  gt     lt div class  quot row quot  gt       lt div class  quot span4 quot  gt  lt  div gt       lt div class  quot span4 quot  gt  lt img class  quot center-block quot  src  quot logo png quot    gt  lt  div gt       lt div class  quot span4 quot  gt  lt  div gt     lt  div gt   lt  div gt   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

User · Answer

Works for me  try using center-block   lt div class  container row text-center  gt       lt div class  row  gt         lt div class  span4  gt  lt  div gt         lt div class  span4  gt  lt img class  center-block  src  logo png    gt  lt  div gt         lt div class  span4  gt  lt  div gt       lt  div gt   lt  div gt

User · Answer

I need the same and here I found the solution   https   stackoverflow com a 15084576 1140407   lt div class  container  gt     lt div class  row  gt       lt div class  span9 centred  gt        This div will be centred       lt  div gt     lt  div gt   lt  div gt    and to CSS    class   span   centred     margin-left  auto    margin-right  auto    float  none

User · Answer

You could use the following  It supports Bootstrap 3 x above    lt img src       alt       class  img-responsive center-block    gt

User · Answer

The correct way of doing this is   lt div class  row text-center  gt     lt img     gt   lt  div gt

User · Answer

Seems we could use a new HTML5 feature if the browser version is not a problem   in HTML files     lt div class  centerBloc  gt    I will be in the center  lt  div gt    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

User · Answer

You can use margin property with the bootstrap img class    name-of-class  img-responsive   margin  0 auto

User · Answer

You should use    lt div class  row fluid-img  gt     lt img class  col-lg-12 col-xs-12  src  src png  gt   lt  div gt    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

User · Answer

I created this and added to Site css    img-responsive-center       display  block      height  auto      max-width  100       margin-left auto      margin-right auto

User · Answer

Update 2018  The center-block class no longer exists in Bootstrap 4  To center an image in Bootstrap 4  use mx-auto d-block      lt img src       class  mx-auto d-block   gt

User · Answer

I am using justify-content-center class to a row within a container  Works well with Bootstrap 4    lt div class  container-fluid  gt     lt div class  row justify-content-center  gt      lt img src  logo png    gt     lt  div gt   lt  div gt

[css] How to align an image dead center with bootstrap

Examples related to css

Examples related to twitter-bootstrap