Wie zentriere ich ein Feldgitter, während die letzte Zeile linksbündig ausgerichtet wird?

So zentrieren Sie Kästchen, richten aber die letzte Zeile links aus

Problem:

Ein Benutzer möchte Kästchen in einem Container in der Mitte ausrichten, die letzte Reihe jedoch linksbündig belassen. Mit anderen Worten, sie möchten verhindern, dass der Text in der letzten Zeile zentriert wird.

Relevanter Code:

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;
}

Beispielergebnis:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Lösung mit CSS Raster:

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;
}

Beispielergebnis:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Erklärung:

• Das Anstelle von Flexbox oder Inline-Block wird das CSS-Grid-Layout verwendet.
• Der Rechtfertigungsinhalt: Mitte; Die Eigenschaft des ul-Elements richtet die Boxen in der Mitte des übergeordneten Containers aus.
• Die Eigenschaft „grid-template-columns“ definiert die Breite jeder Box.
• Die Eigenschaft „grid-gap“ steuert den Abstand zwischen den Boxen.
• Diese Lösung richtet Boxen automatisch in der Mitte aus und passt Reihen unterschiedlicher Länge an, ohne dass manuelle Anpassungen erforderlich sind Skripte.

Das obige ist der detaillierte Inhalt vonWie zentriere ich ein Feldgitter, während die letzte Zeile linksbündig ausgerichtet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!