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>