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.

Answer 1

CSS Flexbox is well supported these days. Go here for a good tutorial on flexbox.

This works fine in all newer browsers:

#container {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.block {
  width:              150px;
  height:             150px;
  background-color:   #cccccc;
  margin:             10px;        
}

  
1
    
  
2
    
  
3
    
  
4
    
  
5
        

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.