0

Estou fazendo um teste com layouts para exibir imagens, e estou com uma dúvida referente ao alinhamento dos itens dentro de uma div.

Basicamente, tenho um conjunto de imagens e preciso exibí-las alinhadas, 3 por linha.

Preciso carregar as imagens automaticamente, o que na prática me impossibilita de saber a quantidade de imagens a serem dispostas e de colocar as tags html das imagens manualmente no fonte.

Acontece que algumas vezes a quantidade de imagens para exibir faz com que sobre 1 ou 2 imagens na última linha. Neste caso, por questões de layout e visuais da página, gostaria que esta 1 ou 2 imagens que "sobram" na última linha possam ser alinhadas ao centro.

Então aí reside minha dúvida. É possível centralizar estas imagens desta maneira, de forma que não altere a disposição das imagens das outras linhas?

Segue um trecho de código que estou usando, para exemplificar:

.coluna {
     float: left;
     width: 33.33%;
     height: 33.33%;
     margin: 0 auto;
     display: inline-block;
     box-sizing: border-box;
}
.row::after {
   content: "";
   clear: both;
   display: table;
}
<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem4" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem5" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem6" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem7" alt="Teste" style="width:100%">
  </div>
</div>

2 Respostas 2

0

O jeito mais fácil é usar o flexbox ou grid no div mais externo. Você pode dimensionar as colunas de forma automática também mas como você explicitou o 33%, acabei deixando.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.column {
  background: gray;
  width: 33%;
}
.column img {
  width: 100%;
}
<div class="container">
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
    <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="column">
    <img src="https://via.placeholder.com/150" />
  </div>
</div>

1
  • 1
    Entendi, Ricardo. Sua resposta soluciona meu problema também. Muito obrigado!
    – gafa
    Commented 17/09/2020 às 21:18
0

É possível sim, apenas retire o float: left da classe .coluna e adicione o text-align: center na classe .row, feito isso só ajustar o tamanho das colunas:

Ficara assim:

<style>
  .row{
    text-align: center;
  }

  .coluna {
     width: 30%;
     height: 33.33%;
     margin: 0 auto;
     display: inline-block;
     box-sizing: border-box;
  }

  .row::after {
     content: "";
     clear: both;
     display: table;
  }
</style>

<div class="row">
  <div class="coluna">
    <img src="imagem1" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem2" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem3" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem4" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem5" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem6" alt="Teste" style="width:100%">
  </div>
  <div class="coluna">
    <img src="imagem7" alt="Teste" style="width:100%">
  </div>
</div>

Espero ter ajudado!

1
  • Cara solucionou sim. Ainda bem que era algo simples para resolver. Obrigado pela resposta.
    – gafa
    Commented 17/09/2020 às 21:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .