Centering floating divs within another div

Question

I\'ve searched other questions and, while this problem seems similar to a couple of others, nothing I\'ve seen so far seems to address the issue that I\'m having.

I

Answer 1

The following solution does not use inline blocks. However, it requires two helper divs:

1. The content is floated
2. The inner helper is floated (it stretches as much as the content)
3. The inner helper is pushed right 50% (its left aligns with center of outer helper)
4. The content is pulled left 50% (its center aligns with left of inner helper)
5. The outer helper is set to hide the overflow

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

  

    

      
Box 1
      
Box 2
      
Box 3
    
  



  

    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      
Nullam efficitur nulla in libero consectetur dictum ac a sem.
      
Suspendisse iaculis risus ut dapibus cursus.