Center parent div with float children

Question

Parent hasnt got a defined width because there are unknown number of children inside.

Why do children fall into new line and how to prevent that? Children need to be on

Answer 1

Use center class :

.wrap {
  text-align: center;
  margin: 50px auto 0 auto;
  height:40px;
}

.center {
  display: inline-block;
}

.box {
 width: 40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

@media all and (max-width: 474px) {
  .box {
    width: 25px;
  }
}

  

    
0
    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10