Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

CSS Center child divs within parent div

If I have a parent div with 11 child divs within and I want to have 4 children on the first row, 3 children on the second row and 4 children on the third row, how do I write that?
Avatar of Jeffrey Dake
Jeffrey Dake
Flag of United States of America image
Something like this would work.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>     
<style>
   .wrapper{ display: flex; flex-wrap: wrap;}
   .wrapper DIV {flex-basis: 25%;}
   .wrapper DIV:nth-child(5),.wrapper DIV:nth-child(6), .wrapper DIV:nth-child(7) {flex-basis: 33%;}
</style>
<body>

<div class="wrapper">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>

</div>

</body>

</html>

Open in new window



ASKER CERTIFIED SOLUTION
Avatar of Ryan Chong
Ryan Chong
Flag of Singapore image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial