"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como alinhar DIVs horizontalmente dentro de um DIV de contêiner?

Como alinhar DIVs horizontalmente dentro de um DIV de contêiner?

Publicado em 11/12/2024
Navegar:176

How to Horizontally Align DIVs Within a Container DIV?

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.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3