Comment centrer un conteneur et aligner les éléments enfants à gauche avec les requêtes multimédias ?

Aligner le conteneur au centre et aligner les éléments enfants à gauche

Dans ce scénario, vous disposez de plusieurs images de dimensions égales que vous souhaitez afficher sur un page web. Votre objectif est de les regrouper au centre de la page, l'un après l'autre, avec une distance fixe entre eux.

Le code CSS donné tente de centrer le conteneur dans la page en utilisant text-align: center , mais cela ne traite pas de l'alignement des images enfants. Le résultat est que les images sont affichées de manière linéaire, sans aucun centrage ni espacement fixe.

Une solution plus complète nécessite de prendre en compte plusieurs tailles de fenêtre et d'appliquer des requêtes multimédias pour définir les largeurs appropriées pour le div interne qui contient les images. Voici le code :

<code class="css">/* Set parent container to be centered */
.outer {
  text-align: center;
}

/* Set inner div to be inline-block for wrapping child elements */
.inner {
  font-size: 0; /* To prevent inline gaps between divs */
  display: inline-block;
  text-align: left;
}

/* Define the individual image elements */
.item {
  font-size: 16px; /* Reset font size */
  display: inline-block;
  margin: 5px; /* Gutter */
}

/* Image alignment within item divs */
.item img {
  vertical-align: top;
}

/* Media queries for different viewport sizes */
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
  .inner {
    width: 440px; /* (100+5+5)x4 */
  }
}

@media (max-width: 441px) {
  .inner {
    width: 330px;
  }
}

@media (max-width: 331px) {
  .inner {
    width: 220px;
  }
}

@media (max-width: 221px) {
  .inner {
    width: 110px;
  }
}</code>

En ajustant la largeur du div interne en fonction de la taille de la fenêtre d'affichage, vous pouvez obtenir la disposition souhaitée des images centrées, enveloppées selon les besoins pour s'adapter à l'espace disponible. Notez que cette approche peut ne pas être optimale pour un grand nombre d'images, car elle implique plusieurs requêtes multimédias.

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!