Make the div centered align

Question

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;
}

"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
please check the answer and let me know if you need anything else — Pratik, May 16 '15 at 12:04
Possible duplicate of http://stackoverflow.com/questions/4767971/how-do-i-center-float-elements — Bhavesh G, May 16 '15 at 12:52

score 1 · Answer 1 · answered May 16 '15 at 12:01

1

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

}

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

answered May 16 '15 at 12:01

Pratik

1,126
8
24

Manwal · Answer 2 · 2015-05-16T12:06:47.767

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

edited May 16 '15 at 12:06

answered May 16 '15 at 12:00

Manwal

22,994
11
59
91

score 0 · Answer 3 · answered May 16 '15 at 12:02

0

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

answered May 16 '15 at 12:02

radscheit

352
4
22

score 0 · Answer 4 · answered May 16 '15 at 12:09

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

answered May 16 '15 at 12:09

connexo

49,059
13
74
108

score 0 · Answer 5 · answered May 16 '15 at 12:11

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>

Make the div centered align

5 Answers5