Allineare immagini al centro con CSS e Flexbox

In questo articolo vediamo come allineare una serie di immagini al centro di un div usando CSS e Flexbox.

Ovviamente ci sono svariati modi per ottenere questa cosa, ma con Flexbox mi sono trovato bene.

Cominciamo con l'HTML:

<div class="loghi_container">
  <div class="loghi_img"><img src="./uno.png" alt="" height="70"></div>
  <div class="loghi_img"><img src="./due.png" alt="" height="70"></div>
  <div class="loghi_img"><img src="./tre.png" alt="" height="70"></div>
  <div class="loghi_img"><img src="./quattro.png" alt="" height="70"></div>
</div>

Qui sotto il CSS:

.loghi_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loghi_img {
    margin-left: 15px ;
    margin-right: 15px;
}

Enjoy!