Comment centrer un conteneur et aligner les éléments enfants à gauche à l'aide de CSS ?

Conteneur aligné au centre et éléments enfants alignés à gauche

Pour obtenir la disposition souhaitée où les images sont affichées dans un conteneur centré avec un distance, nous devons prendre en compte diverses propriétés CSS :

Centrer le conteneur:

• Utiliser text-align: center; sur le conteneur parent (outer-div) pour le centrer horizontalement sur la page.

Création du conteneur d'éléments enfants :

• Enveloppez les images au sein d'un div interne (inner-div) pour contrôler leur alignement.

Définition des dimensions de l'image :

• Maintenir des dimensions d'image cohérentes (hauteur et largeur ) pour assurer l’alignement. Utilisez les propriétés de hauteur et de largeur sur la balise img.

Ajout de gouttières :

• Introduisez une petite marge (marge : 10 px ;) entre l'enfant éléments (balises img) dans le inner-div. Cela créera un espacement fixe entre les images.

Alignement horizontal :

• Définir l'affichage : en ligne ; sur le conteneur d'éléments enfants (inner-div) pour afficher les éléments enfants (images) horizontalement.

Éléments enfants alignés à gauche :

• Utilisez text-align: left; sur le conteneur d'éléments enfants (inner-div) pour aligner à gauche les éléments enfants (images) qu'il contient.

Responsive Design :

• Pour ajuster la largeur du conteneur en fonction de la taille de l'écran, utilisez des requêtes multimédias. Dans l'exemple donné, la largeur du div interne est ajustée pour différentes largeurs de fenêtre.

En suivant ces étapes et en implémentant l'extrait de code fourni, vous pouvez obtenir la mise en page souhaitée avec des images centrées dans le conteneur, affichés l'un après l'autre et à une distance fixe les uns des autres.

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!