Comment centrer une grille de cases tout en alignant à gauche la dernière ligne ?

Comment centrer les cases mais aligner la dernière ligne à gauche

Problème :

Un utilisateur souhaite aligner les boîtes d'un conteneur au centre, mais garder la dernière ligne alignée à gauche. En d'autres termes, ils veulent éviter que le texte soit centré sur la dernière ligne.

Code pertinent :

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block;
}

Exemple de résultat :

item1	item2	item3
item4	item5	item6
item7	item8	item9

Solution utilisant CSS Grille :

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

Exemple de résultat :

item1	item2	item3
item4	item5	item6
item7	item8	item9

Explication :

• Le La disposition CSS Grid est utilisée à la place de flexbox ou de bloc en ligne.
• Le contenu justifié : centre; La propriété grid-template-columns définit la largeur de chaque boîte.
• La propriété grid-gap contrôle l'espace entre les boîtes.
• Cette solution aligne automatiquement les boîtes au centre et s'adapte aux rangées de différentes longueurs sans avoir besoin d'ajustements manuels ou scripts.

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!