Lernen Sie die vertikale und horizontale Zentrierung mit display: table

Einführung

In diesem Lab werden wir lernen, wie wir ein Kindelement innerhalb seines Eltern-elements mithilfe von display: table zentrieren können. Mit dieser Technik können wir sowohl vertikale als auch horizontale Zentrierung leicht erreichen, ohne auf komplizierte Positionierung oder JavaScript zurückgreifen zu müssen. Dies ist eine nützliche Fähigkeit, wenn Sie responsive Layouts für Websites und Anwendungen entwerfen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/lists_and_tables("Lists and Tables") css/CSSPreprocessorsGroup -.-> css/nesting("Nesting") subgraph Lab Skills css/selectors -.-> lab-35191{{"Zentrierung mit display: table"}} css/colors -.-> lab-35191{{"Zentrierung mit display: table"}} css/text_styling -.-> lab-35191{{"Zentrierung mit display: table"}} css/borders -.-> lab-35191{{"Zentrierung mit display: table"}} css/width_and_height -.-> lab-35191{{"Zentrierung mit display: table"}} css/display_property -.-> lab-35191{{"Zentrierung mit display: table"}} css/lists_and_tables -.-> lab-35191{{"Zentrierung mit display: table"}} css/nesting -.-> lab-35191{{"Zentrierung mit display: table"}} end

Zentrierung mit display: table

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

Um ein Kindelement sowohl vertikal als auch horizontal innerhalb seines Eltern-elements zu zentrieren, folgen Sie diesen Schritten:

Fügen Sie ein Container-Element mit einer festen height und width hinzu.

<div class="container"></div>

Fügen Sie das Kindelement innerhalb des Container-Elements hinzu und geben Sie es die Klasse .center.

  <div class="center"><span>Zentrierter Inhalt</span></div>
</div>

Wenden Sie in der CSS die folgenden Stile auf das Container-Element an:

Setzen Sie height und width auf die gewünschten festen Werte.
Fügen Sie eine Grenze hinzu (optional).

.container {
  border: 1px solid #9c27b0;
  height: 250px;
  width: 250px;
}

Wenden Sie in der CSS die folgenden Stile auf das Kindelement an:

Verwenden Sie display: table, um das .center-Element wie ein <table>-Element zu verhalten.
Setzen Sie height und width auf 100%, um das Element den verfügbaren Platz innerhalb seines Eltern-elements zu füllen.
Verwenden Sie display: table-cell auf dem Kindelement, um es wie ein <td>-Element zu verhalten.
Verwenden Sie text-align: center und vertical-align: middle auf dem Kindelement, um es horizontal und vertikal zu zentrieren.

.center {
  display: table;
  height: 100%;
  width: 100%;
}

.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

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 Lab "Zentrierung mit display: table" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.