Align div center and left

Question

Align div center and left

Navigation

#1 by (1 votes)

1

Hello, I have a question regarding div alignment. I have a situation where I have multiple divs within one another. I want the internal divs to be aligned to the center, but when there is a line break, the div that went to the second line goes to the position on the left, just below the first div on the first line.

But to do this I also can not use predefined width and height, since I want the div to be self-tuned.

Here is an example of the situation I currently have:

.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 border is larger than on the left border, so I would like the border spacing to remain the same.

Thanks for the help.

html css div alinhamento

asked by anonymous 02.08.2018 / 19:31

1 answer

Open android app via php "Switch" command enters "default"

score 1 · Accepted Answer

There is an option for this, but it is not with flexbox is with grid .

Here's a practical example and more explanations. link

Here's an example based on what you were left wondering about. 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 cell of the grid will be at least 90px wide and a maximum of 1fr, but the inside square always stays 90x90px. Notice that the side margins are always the same.

OBS: The container does not have a width, but without a width the items will be scattered around the screen, or you put more items or determine a width to avoid this item spacing . 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>