CODEWITHSUNDEEP
htmlcss
Vishu238
Vishu238

Reputation: 673

Make the div centered align

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

Upvotes: 0

Views: 72

Answers (5)

Vishu238
Vishu238

Reputation: 673

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>

Upvotes: 0

connexo
connexo

Reputation: 56754

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

Upvotes: 0

Manwal
Manwal

Reputation: 23816

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

Upvotes: 0

radscheit
radscheit

Reputation: 352

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

Upvotes: 0

Pratik
Pratik

Reputation: 1138

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

}

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

Upvotes: 1

Related Questions