CSS Display: Elemente positionieren und ausrichten

Mit HTML werden Webseiten in einer sinngemäßen Darstellung strukturiert, für das eigentliche Aussehen hingegen sorgt CSS (Cascading Style Sheets). Die Sprache steuert das Layout, die Formatierung und das generelle Aussehen einer Webseite. CSS Display beschreibt dabei eine Eigenschaft dieser Sprache, einzelne Elemente anzuordnen. In diesem Guide zeigen wir, wie Sie CSS Display nutzen können, um Elemente zu positionieren.

Die wichtigsten Funktionen von CSS Display

CSS Display kann mit unterschiedlichen Werten eingesetzt werden und ermöglicht damit verschiedene Funktionen. Im Folgenden haben wir die wichtigsten CSS-Display-Werte und ihre Funktionen zusammengefasst:

CSS display: none

Mit „CSS display: none“ wird das gewählte Element vollständig ausgeblendet und verbraucht damit keinen Platz im Layout der Seite. Will man das CSS Display versteckt darstellen, empfiehlt sich der Gebrauch von „CSS display: hidden“. Dieses versteckt das Element, es bleibt jedoch weiterhin auf der Seite erhalten und nimmt daher auch Platz ein. Im Code sieht das folgendermaßen aus:

CSS display: block

Mit „CSS display: block“ wird ein Element als Block oder Box dargestellt. Blockelemente nehmen immer die ganze Breite der Webseite an. Elemente, die nicht über den gesamten Bereich gehen, weil sie beispielsweise Inline-Elemente sind, können durch die Eigenschaft „display: block“ so angepasst werden, dass sie in Höhe und Breite dynamisch über die gesamte Seite skaliert werden.

CSS display: inline

Die Inline-Elemente nehmen nicht die gesamte Breite an. CSS-Eigenschaften, die mit der Höhe zu tun haben, können auf Inline-Elemente nicht angewandt werden. Dafür lässt sich mit „CSS display: inline“ ein Block in ein Inline-Element verwandeln. Der dazugehörige Code sieht beispielsweise so aus:

CSS display: contents

Mit dem CSS-Wert „display: contents“ werden sämtliche Eigenschaften eines Elementes entfernt, wobei das Element selbst auf der Webseite enthalten bleibt, anders als bei „display: none“, mit dem ein Element vollständig ausgeblendet wird. Nützlich ist „display: contents“ vor allem, um Blöcke aus stark verschachtelten Elementen zu extrahieren. Der Code kann beispielsweise so aussehen:

CSS display: table

Um über CSS Display die Werte einer Tabelle zu ändern, gibt es verschiedene Möglichkeiten. Mittlerweile wird anstelle von „CSS display: table“ häufig ein „CSS display: grid“ verwendet, mit dem Elemente in Zeilen und Spalten einfach sortiert werden können.

In der CSS-Tabelle haben alle Elemente innerhalb einer Tabellenzeile die gleiche Höhe und sind nur so breit wie der Inhalt selbst. „display: table“ kann durch „margin-left: auto“ und „margin-right: auto“ zentriert angelegt werden und bleibt dabei responsive. Der Code lautet folgendermaßen:

Das Aussehen eines Elements in Tabellenform kann außerdem über folgende CSS-Werte angepasst werden:

• CSS display: table-caption: Element wird als Tabellenbeschriftung erstellt
• CSS display: table-cell: Element wird als Tabellenzelle dargestellt
• CSS display: table-column: Element wird als Tabellenspalte dargestellt
• CSS display: table-column-group: Element wird als Gruppe von Tabellenspalten dargestellt
• CSS display: table-footer-group: Element wird als Gruppe von Tabellenfußnoten dargestellt
• CSS display: table-header-group: Element wird als Gruppe von Tabellenköpfen dargestellt
• CSS display: table-row: Element wird als Tabellenzeile dargestellt
• CSS display: table-row-group: Element wird als Gruppe von Tabellenzeilen dargestellt

Tipp: Wollen Sie ein responsives Design mit CSS Display erstellen, sollten Sie sogenannte Media Queries verwenden. Diese ermöglichen es, den Display-Wert an die Bildschirmgröße anzupassen.

Weitere Werte für CSS Display

Um mit CSS Display einzelne Elemente zu positionieren, auszurichten und zu verändern, können noch weitere Werte hinzugezogen werden. Dazu gehören unter anderem:

• CSS display: grid: Elemente können in einem Raster beliebig positioniert werden, ohne dass die Reihenfolge berücksichtigt werden muss
• CSS display: flex: Element wird als Blockelement und Flex-Container dargestellt
• CSS display: inline-table: Tabelle wird als Inline-Element oder Inline-Box dargestellt, ohne einen Zeilenumbruch vor und nach der Tabelle zu generieren
• CSS display: inline-block: Höhe und Breite des Elements werden bestimmt, wobei die Abstände nach oben und unten eingehalten werden
• CSS display: list-item: Element wird als Liste dargestellt

CSS Display ist, wie gesagt, darauf ausgelegt, die Position und Darstellungsweise eines Elementes auf einer Webseite zu kontrollieren. Möchten Sie hingegen die visuellen Attribute ändern, um beispielsweise die Farbe anzupassen, bietet sich der Gebrauch von CSS-Properties wie „color“ oder „background-color“ an.

Fazit: Heben Sie Ihre Websites auf ein neues Level

CSS-Grundlagen sind das A und O einer erfolgreichen Website. Mit der Display-Eigenschaft in CSS kann bestimmt werden, wie ein HTML-Element auf einer Webseite angezeigt und positioniert wird.

Durch verschiedene Display-Werte wie „display: flex“, CSS Grid und „display: none“ können sowohl das Layout als auch das Verhalten eines Elements angepasst werden, ohne das HTML-Markup zu ändern. Und auch in Zukunft wird das Werkzeug eine wichtige Rolle spielen, da es immer neue Möglichkeiten für kreative, flexible und innovative Nutzungserlebnisse bietet.

Titelbild: Pankaj Patel / Unsplash