Aligning a float left div to center

Question

I want to have a group of images display horizontally across the page  Each image has a few link below it so I need to put a container around each image link-group   The closest I have gotten to what I want is putting them in divs that float left  The problem is I want the containers to align center not left  How can I achieve this

User · Answer

try it like this      lt div id  divContainer  gt       lt div class  divImageHolder  gt      IMG HERE      lt  div gt       lt div class  divImageHolder  gt      IMG HERE      lt  div gt       lt div class  divImageHolder  gt      IMG HERE      lt  div gt       lt br class  clear    gt       lt  div gt        lt style type  text css  gt       divContainer   margin  0 auto  width  800px         divImageHolder   float left         clear   clear both         lt  style gt

User · Answer

Just wrap floated elements in a  lt div gt  and give it this CSS    wrapper    display  table  margin  auto

User · Answer

CSS Flexbox is well supported these days  Go here for a good tutorial on flexbox   This works fine in all newer browsers    x000D   x000D   container   x000D    display          flex  x000D    flex-wrap        wrap  x000D    justify-content  center  x000D    x000D   x000D   block   x000D    width               150px  x000D    height              150px  x000D    background-color     cccccc  x000D    margin              10px          x000D    x000D   lt div id  container  gt  x000D     lt div class  block  gt 1 lt  div gt      x000D     lt div class  block  gt 2 lt  div gt      x000D     lt div class  block  gt 3 lt  div gt      x000D     lt div class  block  gt 4 lt  div gt      x000D     lt div class  block  gt 5 lt  div gt          x000D   lt  div gt  x000D   x000D   x000D    Some may ask why not use display  inline-block  For simple things it is fine  but if you got complex code within the blocks  the layout may not be correctly centered anymore  Flexbox is more stable than float left

User · Answer

use display inline-block  instead of float  you can t centre floats  but inline-blocks centre as if they were text  so on the outer overall container  of your  row  - you would set text-align  center  then for each image caption container  it s those which would be inline-block   you can re-align the text to left if you require

User · Answer

contentWrapper       float  left      clear  both      margin-left  10       margin-right  10       repeater       height  9em      width  9em      float  left      margin  0 2em      position  relative      text-align  center      cursor  pointer

User · Answer

Perhaps this what you re looking for - https   www w3schools com css css3 flexbox asp  CSS    container     display                  flex    flex-wrap                wrap    justify-content          center      block     width               150px    height              150px    margin              10px              HTML    lt div id  container  gt     lt div class  block  gt 1 lt  div gt         lt div class  block  gt 2 lt  div gt         lt div class  block  gt 3 lt  div gt             lt  div gt

[html] Aligning a float:left div to center?

Examples related to html

Examples related to css