Alignement des éléments dans CSS

Alignement CSS Démystifié: un guide complet (partie 1)

L'alignement des éléments dans CSS peut être étonnamment difficile. Attorons cette front et apprenons à positionner efficacement les éléments.

1. Définir la scène

Nous commencerons par un exemple de HTML:

<div class="outer-div">
  <div class="inner-div"></div>
  <p>Initial rendering without CSS:</p>
  <img alt="Initial rendering" src="/uploads/20250128/173802269967981f2bdc9c3.jpg" loading="lazy">
  <p>Adding CSS for improved styling:</p>
  <img alt="Improved styling" src="/uploads/20250128/173802270067981f2c02601.jpg" loading="lazy">
  <p>This is a basic example.</p>
</div>

et le CSS correspondant:

.outer-div {
  /* Alignment styles will be added here */
}

.inner-div {
  width: 150px;
  height: 150px;
  background-color: blue;
  /* More alignment styles here */
}

h1, p {
  font-family: sans-serif;
}

2. Éléments centrants

Centre nos éléments. Ajout display: flex; et justify-content: center; à .outer-div donne:

.outer-div {
  display: flex;
  justify-content: center;
}

l'application de la même chose à .inner-div produit initialement des résultats inattendus. La suppression des propriétés width et height de .inner-div améliore le résultat, mais ce n'est pas idéal.

Ajustez légèrement le HTML. Le HTML et CSS mis à jour suivants fournit une meilleure illustration:

<div class="outer-div">
  <div class="inner-div">Centered Content</div>
</div>

Changer justify-content: center; en justify-content: space-between; dans .outer-div démontre une autre technique d'alignement utile.

Cela couvre les fondamentaux. Restez à l'écoute pour la partie 2! Partagez vos conseils et astuces d'alignement CSS ci-dessous!

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!