How to fix div child of parent center when "float:left"?

Question

I tried to center child divs inside a parent div. Quantity of child div is dynamic and I make "float: left". But group of child divs can't center inside a parent div. Parent div static width: 800px; Child divs static width: 360px; height: 320px.

Here my code:

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
}

.child {
  width: 360px;
  margin: 7px;
  min-width: 360px;
  height: 320px;
  float: left;
  background-color: #FFFF;
  border: 1px solid;
}

<div class="parent">
  <div class="content">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Some way I references but not in my case:
- http://jsfiddle.net/h9H8w/12/
- https://dev.to/stel/a-little-trick-to-left-align-items-in-last-row-with-flexbox-230l
- https://codepen.io/anon/pen/JbpPKa

My results like that:
- https://i.stack.imgur.com/5dJIA.jpg
- https://i.stack.imgur.com/CZory.jpg

Thanks for reading and sorry my bad english.

========================================================

From the help of @kukkuz. I changed my code:

 * {
        box-sizing: border-box;
    }
    .parent {
        max-width: 800px; 
        display: grid;
        justify-content: center;
        background-color: #f8f9fb;          
        grid-template-columns: repeat( auto-fit, 360px);
        grid-gap: 7px;
    }

.child {
    width: 360px;
    /*margin: 7px;*/
    min-width: 360px;
    height: 320px;
    /*  float: left;*/
    background-color: #FFFF;
    border: 1px solid;
}


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

flexbox properties affect the so-called *flex items* which are direct child elements of the *flex container* — kukkuz, May 04 '19 at 16:09

score 1 · Answer 1 · answered May 04 '19 at 16:04

1

Is this what u want, Basically I removed the float:left and the content div

justify-content: center; will handle the centering of the boxes,

Uncomment flex-wrap:wrap; to wrap the children on to the next line

Know that, making a div display:flex, will make its children flex-items, which was not happening in your case

* {
  box-sizing: border-box;
}

.parent {
  width: 800px;
  display: flex;
  justify-content: center;
  background-color: #f8f9fb;
  /*flex-wrap:wrap;*/
}

.child {
  width: 36px;
  margin: 7px;
  min-width: 36px;
  height: 32px;
  background-color: #FFFF;
  border: 1px solid;
}

<div class="parent">

  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>


</div>

answered May 04 '19 at 16:04

Gautam Naik

8,990
3
27
42

As you can see, I want child divs can break-line if width of us larger than parent div. And child divs alway had width: 360px and height 320px. – Duy Huỳnh May 05 '19 at 02:15
@kukkuz I tried. But the problem is last child div, I want to make it "align left" – Duy Huỳnh May 05 '19 at 13:32
@DuyHuỳnh hmm, so the last row is the problem right? read through [this](https://stackoverflow.com/questions/42176419/) and [this](https://stackoverflow.com/questions/54648178/) – kukkuz May 05 '19 at 14:37
1

@kukkuz Thanks bro, it very helpful. I resolved it. – Duy Huỳnh May 05 '19 at 16:13

How to fix div child of parent center when "float:left"?

1 Answers1