Meistern des zentrierten Grid-Layouts

Einführung

In diesem Lab werden wir das Konzept der Grid-Zentrierung mit CSS erkunden. Sie werden lernen, wie Sie ein Kind-Element horizontal und vertikal in einem Eltern-Element mithilfe des grid-Layouts zentrieren. Am Ende dieses Labs werden Sie eine solide Vorstellung davon haben, wie Sie die justify-content- und align-items-Eigenschaften verwenden, um ein perfekt zentriertes Layout zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") subgraph Lab Skills css/selectors -.-> lab-35205{{"Meisterschaft im zentrierten Grid-Layout"}} css/width_and_height -.-> lab-35205{{"Meisterschaft im zentrierten Grid-Layout"}} css/display_property -.-> lab-35205{{"Meisterschaft im zentrierten Grid-Layout"}} end

Grid-Zentrierung

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Kind-Element sowohl horizontal als auch vertikal in einem Eltern-Element zu zentrieren, folgen Sie diesen Schritten:

Erstellen Sie ein Grid-Layout mit display: grid.
Verwenden Sie justify-content: center, um das Kind horizontal zu zentrieren.
Verwenden Sie align-items: center, um das Kind vertikal zu zentrieren.

Hier ist ein Beispiel für eine HTML-Struktur:

<div class="parent">
  <div class="child">Zentrierter Inhalt.</div>
</div>

Und die entsprechende CSS:

.parent {
  display: grid;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Grid-Zentrierungslab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.