Can anyone explain why item align center?

Question

In this case, the wrapper's height is calculated as zero. However, i wonder how it is sorted without wrapping all the items.

Html code is:

<!doctype html>
<html>
<head>
  <style>
    .wrapper {
    width: 660px;
    margin-left: auto;
    margin-right: auto;
    }

    .item {
   float: left;
   width: 200px;
   background-color: orange;
   height: 200px;
   margin-right: 10px;
   margin-left: 10px;
   }
</style>
</head>
<body>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

Thx, everyone.

What I'm curious about, I think align in this way is to put it in a frame. By the way, I thought that I put it in a frame that had a width but no height, so I asked a question. This is because even if there are more items, that is, even if there are six items, they are arranged with three items per line.

`float` takes the elements out of the normal flow of the document. This is why the `wrapper` appears with 0 height. Add `float:left` to the wrapper and this will be solved. Also read the docs to see what `float` does. BUT this is not a good idea. DO NOT use `float` for layout purposes. And what do you mean by ? `Can anyone explain why item align center?` this is very unclear — Mihai T, Aug 27 '19 at 07:18

score 0 · Answer 1 · answered Aug 27 '19 at 07:19

The parent div is not containing its children because they're floated. The easiest fix is probably to add overflow:hidden with display:block to .wrapper, Please try with following code for wrapper class.

.wrapper {
  width: 660px;
  display: block;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}

score 0 · Answer 2 · answered Aug 27 '19 at 07:19

0

You're probably floating the child divs. If so, try below style:

.wrapper { 
    content: " "; 
    display: block;
    clear: both;
}

answered Aug 27 '19 at 07:19

Seba Cherian

1,755
6
18

score 0 · Answer 3 · answered Aug 27 '19 at 07:44

When you are using float to the child elements the parent should be float. So use another property as I given below.

.wrapper{
width: 660px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
}
.item {
width: 200px;
background-color: orange;
height: 200px;
margin-right: 10px;
margin-left: 10px;
}

Can anyone explain why item align center?

3 Answers3