Align div in center and left

Asked

Viewed 1,341 times

1

Hello, I’m having a question about the alignment of div. I have a situation where I have several Divs within one another. I want the internal Ivs to be aligned to the center, but when there is line break, the div that went to the second line go to the position on the left, exactly below the first div in the first line.

Only to do this also I can not use predefined width and height, because I want the outside div to auto fit.

Follow an example of the situation that I have currently:

.fora {
  background-color: black;
  width: auto;
  height: auto;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  margin: 0 auto;
}

.quadrado {
  width: 90px;
  height: 90px;
  background-color: gray;
  float: left;
  margin: 10px;
  align-self: flex-start;
}
<div class="fora">
  <div class="quadrado"></div>
  <div class="quadrado"></div>
  <div class="quadrado"></div>
  <div class="quadrado"></div>
  <div class="quadrado"></div>
  <div class="quadrado"></div>
</div>

The space on the right edge is larger than the left edge, what I would like is for the spacing between the edges to remain the same.

I appreciate the help.

html css div alignment

  • This link will make it easier to see the situation: https://jsfiddle.net/jarlan/34fns1uc/21/

  • Dude if I got it right, I guess the math won’t let me. Yeah, if you have a father div wide auto, or is will adjust to the size of the window and placed the daughters with width of Divs 90px, will have time that window will not fit another daughter div on the same line, soon, will throw the daughter div down, getting that space.

  • But it’s okay to break the line, what I wanted is just that when I broke the line, it wouldn’t be disproportionate to the size of the edges. And if I align the internal elements will look like this: div1 div2 div3 <here breaks the line> div4 (below div2) what I wanted is for it to look like this: div1 div2 div3 <here breaks the line> div4 (below div1) only that this second option with same distance at left and right edges.

1 answer

1


There’s an option for that, but not with flexbox is with grid.

Here is a practical example and more explanations. https://gridbyexample.com/examples/example28/

Here is an example based on what you were left with doubt. But the main thing is to understand how this line works in css grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); Here I defined that each grid cell will be at least 90px wide and a maximum of 1fr, but the inside square is always 90x90px wide. Note that the lateral margins are always the same.

OBS: The container do not need to have a lag, only that without a width the items will be spread across the screen, or you place more items or determine a width to avoid this spacing of the items. Test the example in different resolutions to understand.

.fora {
    padding: 30px 60px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    background-color: black;
    color: #444;
    margin: 0 auto;
}

.quadrado {
    background-color: gray;
    color: #fff;
    height: 90px;
    width: 90px;
    box-sizing: border-box;
    padding: 10px;
    justify-self: center;
}
    <div class="fora">
        <div class="quadrado">A</div>
        <div class="quadrado">B</div>
        <div class="quadrado">C</div>
        <div class="quadrado">D</div>
        <div class="quadrado">E</div>
        <div class="quadrado">F</div>
        <div class="quadrado">G</div>
        <div class="quadrado">H</div>
        <div class="quadrado">I</div>
    </div>

  • Saw Hugo only that he says he can not set width in the father div, has to be self.

  • @Leandrade face I made an edit on the question and put some notes. Now it has no fixed width, but also the items are more spread on the screen.... In this case it is difficult to get the best of both worlds... But test the responsiveness there for you see the result, until it was cool!

  • Exactly Hugo, as I told him there was no way to not create spaces on the right in the way he wanted.

  • Thanks for the help, that’s exactly the effect I was looking for. I needed the items to be aligned in any resolution, but when there was the line break did not remain that uneven space in one corner. Thanks.

  • @Jarlan in this case I think that only with the same grid, because you can adjust the changes relative to the container cell and still be responsive. I mean, it’s got some pros and cons, but in this situation, it was the best option I could find, good luck there.

Browser other questions tagged html css div alignment

You are not signed in. Login or sign up in order to post.