Maison > interface Web > tutoriel CSS > le corps du texte

Comment aligner horizontalement les DIV dans un conteneur DIV ?

Patricia Arquette
Libérer: 2024-10-31 19:32:29
original
726 Les gens l'ont consulté

How to Horizontally Align DIVs Within a Container DIV?

Alignement des DIV horizontalement

Lorsque vous essayez de centrer les DIV horizontalement dans un conteneur DIV, vous pouvez rencontrer des problèmes d'alignement. Cela peut se produire pour plusieurs raisons. Pour résoudre le problème, envisagez la solution suivante :

Utilisez l'affichage en bloc en ligne au lieu de Float

Au lieu d'utiliser la propriété float, envisagez d'utiliser l'affichage : inline- attribut de bloc. Cela garantira que les DIV sont affichés sous forme d'éléments en ligne, permettant un alignement horizontal.

Code mis à jour

Pour implémenter cette solution, modifiez votre code CSS comme suit :

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}
.block {
  width: 100px;
  display: inline-block;
}</code>
Copier après la connexion

Cet ajustement corrigera le problème d'alignement horizontal, permettant aux DIV d'être positionnés au centre du conteneur. Il est à noter que cette approche est particulièrement adaptée aux scénarios où la largeur des DIV est fixe ou relativement similaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!