0

i have 10 DIVs and all of them are set FLOAT:LEFT property. I need to make all DIVs float from center. eg. enter image description here

Please check my code: codepen

HTML:

<div class="main">
  <div class="child">
    <div></div>
    <div></div>

  </div>
</div>

CSS:

.child >  div
{
  float:left;
  height:100px;width:100px;
  border:1px solid red;

}.child{
  border:1px solid green;
  display:inline-block;
  width:400px;
  text-align:center;
}
Bhavesh G
  • 3,000
  • 4
  • 39
  • 66
Vishu238
  • 673
  • 4
  • 17
  • "I need to make all DIVs float from center." - I don't get what you are asking for. Please post an image of what your desired result looks like. Do you mean "centered" rather than "float from center"? – connexo May 16 '15 at 12:00
  • I have posted a image – Vishu238 May 16 '15 at 12:00
  • Possible duplicate of http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements – Bhavesh G May 16 '15 at 12:52

5 Answers5

1
.child >  div
{
  display: inline-block;
  height:100px;width:100px;
  border:1px solid red;

}

http://codepen.io/anon/pen/vOKNoe

Pratik
  • 1,122
  • 8
  • 26
0

Just Add this css to child to make child center. If you want child's inner div center also remove float

display:table;
margin:0 auto;

DEMO

Manwal
  • 23,450
  • 12
  • 63
  • 93
0

Hej, you should consider to wrap them in rows ant to center the wrappers with margin: 0 auto;

radscheit
  • 352
  • 4
  • 22
0

There is no float: center; - floating is either left or right. You can achieve what you need by simply making your inner divs display: inline-block; and removing the float rule. Working solution:

http://codepen.io/anon/pen/aOZdoN

connexo
  • 53,704
  • 14
  • 91
  • 128
0

Thanks all for your quick responses. I got what i wanted.

.child >  div
{
  display: inline-block;
  height:100px;width:100px;
  border:1px solid red;
  
}.child{
  border:1px solid green;
  display:table-cell;
  width:400px;
  text-align:center;
  vertical-align:middle;
 
}
.main{
  display:table;
  height:500px;
  border:1px solid grey;
  
}
<div class="main">
  <div class="child">
    <div></div>
    <div></div>
     <div></div>
     <div></div>
     <div></div>
    
  </div>
</div>
Vishu238
  • 673
  • 4
  • 17