Wie kann ich mithilfe eines CSS-Rasters eine Box mit linksbündiger letzter Zeile zentrieren?

Mittige Ausrichtung mit linksbündiger letzter Zeile

Diese Abfrage befasst sich mit der Herausforderung, Boxen innerhalb eines Containers horizontal zentriert, aber mit der letzten Zeile auszurichten Zeile linksbündig ausgerichtet. Das Hauptproblem besteht darin, dass typische UL-Elemente dazu neigen, ihre Breite basierend auf ihrem Inhalt anzupassen, sodass kein Raum für manuelle Anpassungen bleibt.

Um dieses Problem zu lösen, können wir das CSS-Raster nutzen, das mehr Kontrolle über die Elementplatzierung bietet. Hier ist ein aktualisiertes CSS- und HTML-Code-Snippet:

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

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Durch Hinzufügen von justify-content: center; Zum ul-Element verschieben wir den Inhalt in Richtung Mitte. Wir behalten jedoch die Linksausrichtung für die letzte Zeile bei, was eine inhärente Eigenschaft von CSS Grid ist.

Um die Breite und Höhe der Elemente anzupassen, ändern Sie die Werte in „grid-template-columns“ und „grid-auto-“ Reihen. Passen Sie die Auffüll- und Breiteneigenschaften des Div an Ihre Designanforderungen an.

Durch die Nutzung der Flexibilität des CSS-Rasters können wir eine dynamische Inhaltsausrichtung erreichen, ohne auf manuelle Anpassungen oder Skripte angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe eines CSS-Rasters eine Box mit linksbündiger letzter Zeile zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!