Alinhando DIVs horizontalmente

Ao tentar centralizar DIVs horizontalmente em um DIV de contêiner, você pode encontrar problemas de alinhamento. Isso pode ocorrer por vários motivos. Para corrigir o problema, considere a seguinte solução:

Use Inline-Block Display em vez de Float

Em vez de utilizar a propriedade float, considere empregar o display: inline- atributo de bloco. Isso garantirá que os DIVs sejam exibidos como elementos embutidos, permitindo o alinhamento horizontal.

Código atualizado

Para implementar esta solução, modifique seu código CSS da seguinte forma:

.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}

Este ajuste corrigirá o problema de alinhamento horizontal, permitindo que os DIVs sejam posicionados centralmente dentro do contêiner. Vale a pena notar que esta abordagem é particularmente adequada para cenários onde a largura dos DIVs é fixa ou relativamente semelhante.