centering dynamically

Asked

Viewed 35 times

1

Well I have the following code I’m putting together:

.pg {
  width: 100%;
}

.pg>.produto {
  width: 250px;
  height: 300px;
  position: relative;
  float: left;
  margin: 10px;
  background: #ccc;
  border: 1px solid red;
}
<div class="pg">





  <div class="produto">
    x
  </div>


  <div class="produto">
    x
  </div>
  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>

  <div class="produto">
    x
  </div>






</div>

Well the code is there, as you resize the page the div will fall to the bottom line. But I want to avoid a soft space on the right side, that is when I do not fit another div produto div should be centralized. Avoiding empty space.

Follow the picture of the empty space: inserir a descrição da imagem aqui

html css

2 answers

3


It has a flex shape, but the last row of items will always be centered...

See in the example how it looks, I left a borada and put the width of the container at 90% just to give a "white space" on the sides and you see that centralized.

.pg {
  /* width: 100%; */
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: auto;
    border: 1px solid;
    overflow: auto;
    justify-content: center;
}

.pg>.produto {
  width: 250px;
  height: 300px;
  position: relative;
  float: left;
  margin: 10px;
  background: #ccc;
  border: 1px solid red;
}
<div class="pg">

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>
    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

    <div class="produto">
      x
    </div>

  </div>

  • 1

    My answer is shorter!! Ra!

  • @fernandosavio is that I put some more rss perfumeries. Now the scheme is to leave the items of the last line left, without centralizing... ;)

  • 1

    That’s exactly what I wanted. Thank you

  • 1

    @Hugoborges quiet, my friend! If you are interested in signing here you have other answers with similar problems, where with display:grid the last item is on the left. https://answall.com/questions/327488/flexbox-css-grid/327518#327518 and here tb other grid options limiting 4 per line https://answall.com/questions/324963/como-coloca-um-limite-de-4-imagens-por-linha/324976#324976

2

You can use CSS Flex for this.

All you have to do is say .pg is a flex container and configure the properties flex-wrap and justify-content.

This guide is very practical to use as cheatsheet.

.pg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pg > .produto {
  width: 250px;
  height: 300px;
  margin: 10px;
  background: #ccc;
  border: 1px solid red;
}
<div class="pg">
  <div class="produto">x</div>
  <div class="produto">x</div>
  <div class="produto">x</div>
  <div class="produto">x</div>
  <div class="produto">x</div>
</div>

Browser other questions tagged html css

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