HTML-Elemente zentrieren: Vollständige Anleitung mit praktischen Beispielen

Von Janam Apr 24, 2024

Min Lesedauer

Methoden zum Zentrieren von HTML-Elementen

Als Webentwickler wirst du irgendwann auf die Notwendigkeit stoßen, HTML-Elemente auf einer Webseite zu zentrieren. Glücklicherweise gibt es eine Vielzahl von Methoden, dies zu erreichen.

Verwendung von text-align: center

Eine einfache Möglichkeit, Text zu zentrieren, besteht darin, die CSS-Eigenschaft text-align auf den Wert center zu setzen.

<p style="text-align: center;">Zentrierter Text</p>

Allerdings zentriert diese Methode den Text nur innerhalb seines Containers, nicht aber den Container selbst.

Verwendung von margin: auto

Um einen Container zu zentrieren, kannst du die CSS-Eigenschaft margin auf auto setzen. Dies weist den Browser an, gleiche Abstände links und rechts des Elements einzufügen.

<div style="margin: auto;">
  <p>Zentrierter Container und Text</p>
</div>

Verwendung von Flexbox und justify-content: center

Flexbox bietet eine flexible Möglichkeit, Elemente zu layouten. Um ein Element zu zentrieren, kannst du die Eigenschaft justify-content des Flex-Containers auf center setzen.

<div style="display: flex; justify-content: center;">
  <p>Zentriert mit Flexbox</p>
</div>

Verwendung von Grid und place-content: center

Grid ermöglicht es dir, komplexere Layouts zu erstellen. Um ein Element zu zentrieren, kannst du die Eigenschaft place-content des Grid-Containers auf center setzen.

<div style="display: grid; place-content: center;">
  <p>Zentriert mit Grid</p>
</div>

Jede dieser Methoden hat ihre eigenen Vor- und Nachteile. Die Wahl der besten Methode hängt von den spezifischen Anforderungen deines Projekts ab.

Verwendung von TEXT-ALIGN: CENTER

TEXT-ALIGN ist eine Eigenschaft in CSS, mit der du den horizontalen Ausrichtungswert für Text in einem HTML-Element angeben kannst.

TEXT-ALIGN: CENTER Wert

Wenn du den Wert center für die Eigenschaft text-align verwendest, wird der Text innerhalb des Elements horizontal zentriert. Dies bedeutet, dass der Abstand zwischen dem linken und rechten Rand des Textes gleich ist.

Beispiel

Um Text in einem <p>-Element zu zentrieren, verwende den folgenden Code:

<p style="text-align: center;">Dies ist ein zentrierter Text.</p>

Dieser Code zentriert den Text innerhalb des Absatzes, wie im folgenden Beispiel gezeigt:

<head>
  <style>
    p {
      text-align: center;
    }
  </style>
</head>

<body>
  <p>Dies ist ein zentrierter Text.</p>
</body>

Vorteile

Die Verwendung von TEXT-ALIGN: CENTER ist eine einfache und schnelle Möglichkeit, Text zu zentrieren. Es ist jedoch wichtig zu beachten, dass es nicht für alle Fälle die beste Option ist. Wenn du beispielsweise ein Element zentrieren möchtest, das eine unterschiedliche Breite als seinen Container hat, ist die Verwendung von MARGIN: AUTO oder FLEXBOX möglicherweise eine bessere Wahl.

Verwendung von MARGIN: AUTO

Wenn du MARGIN: AUTO verwendest, teilst du dem Browser mit, dass der freie Bereich links und rechts des Elements automatisch aufgeteilt werden soll, wodurch das Element in der Mitte platziert wird. Diese Methode funktioniert sowohl für Zeilen- als auch für Blockelemente.

Syntax

margin: 0 auto;

wobei:

margin die Eigenschaft ist, die den Abstand des Elements vom umgebenden Text oder anderen Elementen definiert.
0 den Abstand oben und unten auf 0 setzt.
auto dem Browser mitteilt, den seitlichen Abstand automatisch zu berechnen.

Vorteile und Einschränkungen

Vorteile:

Einfach zu implementieren.
Kompatibel mit allen gängigen Browsern.

Einschränkungen:

Das Element kann nicht in Bezug auf andere Elemente zentriert werden.
Funktioniert nicht für ineinander verschachtelte Elemente.

Praktisches Beispiel

<div style="margin: 0 auto; width: 500px;">
  Dies ist ein zentriertes div-Element.
</div>

In diesem Beispiel wird das <div>-Element mit einer Breite von 500 Pixeln zentriert, indem die margin-Eigenschaft auf 0 auto gesetzt wird.

Zentrieren von Tabellen

Um eine Tabelle horizontal zu zentrieren, kannst du folgende CSS-Eigenschaft verwenden:

table {
  margin: 0 auto;
}

Zentrieren von Bildern

Bilder können mithilfe von MARGIN: AUTO sowohl horizontal als auch vertikal zentriert werden.

Horizontale Zentrierung:

img {
  margin: 0 auto;
}

Vertikale Zentrierung:

img {
  margin: auto;
}

Verwendung von FLEXBOX und JUSTIFY-CONTENT: CENTER

Flexbox ist ein modernes CSS-Layout-Modul, das dir eine flexible und leistungsstarke Möglichkeit zum Anordnen von Elementen auf einer Seite bietet. Es ist besonders nützlich zum Zentrieren von Elementen.

Wie funktioniert FLEXBOX?

Flexbox erstellt einen Container (Flex Container), in dem du Elemente als Flex-Items darin platzierst. Du kannst dann die Art und Weise, wie diese Elemente angeordnet werden, über verschiedene Eigenschaften steuern, darunter flex-direction, justify-content und align-items.

Zentrieren mit FLEXBOX und JUSTIFY-CONTENT: CENTER

Um ein Element mit Flexbox zu zentrieren, musst du folgende Schritte ausführen:

Erstelle einen Flex-Container, indem du die Eigenschaft display: flex auf das Elternelement anwendest.
Füge dem Flex-Container mindestens ein Flex-Item hinzu.
Zentriere das Flex-Item horizontal, indem du die Eigenschaft justify-content: center auf den Flex-Container anwendest.

<div style="display: flex; justify-content: center;">
    <p>Zentriertes Element</p>
</div>

Vorteile der Verwendung von FLEXBOX zum Zentrieren

Flexibel: Mit Flexbox kannst du Elemente sowohl horizontal als auch vertikal zentrieren.
Responsiv: Flexbox-Layouts reagieren auf die Größe des Ansichtsfensters und passen sich an unterschiedliche Bildschirmgrößen an.
Modern: Flexbox ist ein moderner CSS-Standard, der von allen gängigen Browsern unterstützt wird.

Nachteile der Verwendung von FLEXBOX zum Zentrieren

Komplexer: Flexbox kann komplexer sein als andere Zentrierungsmethoden.
Browserunterstützung: Ältere Browser unterstützen Flexbox möglicherweise nicht vollständig.

Verwendung von GRID und PLACE-CONTENT: CENTER

Grid Layout ist ein leistungsstarkes Werkzeug zum Anordnen von Elementen auf einer Webseite. Es ermöglicht dir, Layouts mit mehreren Spalten und Zeilen zu erstellen und Elemente innerhalb dieser Zellen zu platzieren.

Vorteile der Verwendung von GRID

Flexibilität: Du kannst das Grid-Layout an unterschiedliche Bildschirmgrößen und Geräte anpassen.
Ordnung: Grid ermöglicht es dir, Elemente auf einer logischen und organisierten Weise anzuordnen.
Unterstützung: GRID wird von allen modernen Browsern unterstützt.

Zentrieren von Elementen mit GRID

Um ein Element mit GRID zu zentrieren, kannst du die Eigenschaft place-content verwenden. Diese Eigenschaft nimmt zwei Werte an:

justify-content: Bestimmt die horizontale Ausrichtung des Inhalts.
align-content: Bestimmt die vertikale Ausrichtung des Inhalts.

Zum Zentrieren eines Elements setze die Eigenschaft place-content auf center center:

.container {
  display: grid;
  place-content: center center;
}

Zentrieren von Inhalten in einer Zeile oder Spalte

Wenn du Inhalte in einer bestimmten Zeile oder Spalte zentrieren möchtest, kannst du die Eigenschaft justify-self oder align-self verwenden. Diese Eigenschaften nehmen dieselben Werte wie place-content an.

Zum Beispiel, um den Inhalt in der zweiten Zeile zu zentrieren, würdest du Folgendes verwenden:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-content: center;
  align-content: center;
}

.item {
  align-self: center;
}

Praktisches Beispiel

Hier ist ein praktisches Beispiel zur Verwendung von GRID zum Zentrieren von Inhalten:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      place-content: center center;
      height: 100vh;
    }

    .content {
      background-color: #f1f1f1;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>Zentrierter Inhalt</h1>
      <p>Dies ist ein zentrierter Absatz.</p>
    </div>
  </div>
</body>
</html>

Zentrieren von Tabellen

Tabellen in HTML zu zentrieren, kann zunächst etwas komplex erscheinen. Hier sind jedoch einige bewährte Methoden, mit denen du deine Tabellen ganz einfach in der Mitte deiner Webseite platzieren kannst:

Verwenden von `text-align: center`

Diese Methode ist nur anwendbar, wenn deine Tabelle nur einen Datenkörper (<tbody>) enthält. Füge einfach die folgende CSS-Regel hinzu:

table {
  text-align: center;
}

Verwenden von `margin: auto`

Diese Methode funktioniert für Tabellen aller Art. Füge die folgende CSS-Regel zur Tabelle hinzu:

table {
  margin: auto;
}

Verwenden von `display: flex` und `justify-content: center`

Diese Methode erfordert, dass du die Tabelle in ein flexibles Box-Modell (Flexbox) einbettest. Füge der Tabelle die folgenden CSS-Regeln hinzu:

table {
  display: flex;
  justify-content: center;
}

Zusätzliche Tipps

Du kannst auch die Attribute align="center" oder style="text-align: center;" verwenden, um Tabellen zu zentrieren. Diese Methoden sind jedoch veraltet und sollten nur als letztes Mittel verwendet werden.
Um die Breite einer zentrierten Tabelle anzupassen, füge die CSS-Regel width: [gewünschte Breite]; hinzu.
Wenn du Probleme beim Zentrieren deiner Tabelle hast, überprüfe den CSS-Code auf Konflikte mit anderen Stilen.

Zentrieren von Bildern

Methoden zum Zentrieren von Bildern

Es gibt verschiedene Methoden, um Bilder in HTML zu zentrieren. Hier sind die gängigsten:

Verwendung von TEXT-ALIGN: CENTER

Diese Methode funktioniert gut, wenn das Bild innerhalb eines Textblocks zentriert werden soll.

<p style="text-align: center;"><img src="bild.jpg" alt="Bild"></p>

Verwendung von MARGIN: AUTO

Diese Methode zentriert das Bild horizontal innerhalb seines Container-Elements.

<div style="margin: 0 auto;">
    <img src="bild.jpg" alt="Bild">
</div>

Verwendung von Flexbox

Diese Methode ist eine flexible und leistungsstarke Option zum Zentrieren von Elementen.

<div style="display: flex; justify-content: center;">
    <img src="bild.jpg" alt="Bild">
</div>

Verwendung von Grid

Diese Methode bietet eine präzise Kontrolle über die Positionierung von Elementen.

<div style="display: grid; place-content: center;">
    <img src="bild.jpg" alt="Bild">
</div>

Zentrieren von Bildern innerhalb einer Tabelle

Um ein Bild innerhalb einer Tabelle zu zentrieren, kannst du die Eigenschaft align verwenden.

<table border="1">
    <tr>
        <td align="center"><img src="bild.jpg" alt="Bild"></td>
    </tr>
</table>

Zentrieren von Bildern innerhalb eines Links

Um ein Bild innerhalb eines Links zu zentrieren, kannst du die Eigenschaft display: block; verwenden.

<a href="link.html">
    <img src="bild.jpg" alt="Bild" style="display: block;">
</a>

Zentrieren von Bildern mithilfe von CSS-Klassen

Wenn du Bilder häufig zentrieren musst, kannst du eine CSS-Klasse erstellen.

.centered-image {
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

<img src="bild.jpg" alt="Bild" class="centered-image">

Zentrieren von Textfeldern

Textfelder sind Formularelemente, die die Eingabe von Nutzertext ermöglichen. Auch diese können mit verschiedenen Methoden zentriert werden.

Verwendung von TEXT-ALIGN: CENTER

Die text-align-Eigenschaft kann verwendet werden, um den Textinhalt eines Textfelds zu zentrieren. Allerdings zentriert dies nicht das Textfeld selbst.

<input type="text" style="text-align: center;">

Verwendung von MARGIN: AUTO

Die margin-Eigenschaft kann verwendet werden, um den Abstand um ein Textfeld anzupassen und es so zu zentrieren. Da Textfelder Inline-Elemente sind, wirkt sich die margin-Eigenschaft nur in horizontaler Richtung aus.

<input type="text" style="margin: 0 auto;">

Verwendung von FLEXBOX

Flexbox bietet eine leistungsstarke Möglichkeit, Elemente auf einer Seite zu layouten, einschließlich Textfeldern. Die Eigenschaft justify-content kann verwendet werden, um Elemente innerhalb eines Flexbox-Containers horizontal zu zentrieren.

<div class="container">
  <input type="text">
</div>

.container {
  display: flex;
  justify-content: center;
}

Zentrieren von Absätzen

Absätze sind ein wesentlicher Bestandteil von Webseiten, die Text enthalten. Durch die Zentrierung von Absätzen kannst du die Lesbarkeit verbessern und ein ausgewogeneres Layout erzielen.

Verwendung von TEXT-ALIGN: CENTER

Eine einfache Möglichkeit, Absätze zu zentrieren, ist die Verwendung der CSS-Eigenschaft text-align. Füge einfach text-align: center; zum Style-Attribut des Absatzes hinzu.

<p style="text-align: center;">Zentrierter Absatz</p>

Verwendung von MARGIN: AUTO

Wenn du den Absatz innerhalb eines breiteren Containers zentrieren möchtest, kannst du die CSS-Eigenschaft margin verwenden. Setze sowohl den linken als auch den rechten Rand auf auto, um den Absatz in der Mitte des Containers zu platzieren.

<div style="width: 500px;">
  <p style="margin: 0 auto;">Zentrierter Absatz innerhalb eines Containers</p>
</div>

Zentrieren von Absätzen in Tabellen

Um Absätze in Tabellen zu zentrieren, kannst du die CSS-Eigenschaft text-align auf die Tabellenzelle anwenden.

<table>
  <tr>
    <td style="text-align: center;">Zentrierter Absatz in einer Tabellenzeile</td>
  </tr>
</table>

Zentrieren von Absätzen mit FLEXBOX

FLEXBOX bietet eine flexible Möglichkeit, Absätze zu zentrieren. Erstelle einen Container mit der Eigenschaft display: flex und verwende dann justify-content: center;, um den Absatz in der Mitte des Containers auszurichten.

<div style="display: flex; justify-content: center;">
  <p>Zentrierter Absatz mit FLEXBOX</p>
</div>

Tipps

Verwende das passende Markup: Stelle sicher, dass du Absätze mit dem <p>-Tag markierst.
Vermeide übermäßige Zentrierung: Zentriere nicht zu viele Elemente, da dies ablenkend wirken kann.
Verwende Media Queries: Passe die Zentrierung an unterschiedliche Bildschirmgrößen an, indem du Media Queries verwendest.

Zentrieren von Blockelementen

Blockelemente nehmen die gesamte verfügbare Breite ein und erzeugen einen Zeilenumbruch nach sich. Um ein Blockelement zu zentrieren, stehen dir verschiedene Techniken zur Verfügung.

Verwendung von TEXT-ALIGN: CENTER

Bei dieser Methode wird die Ausrichtung des Textinhalts innerhalb des Blockelements zentriert. Sie zentriert jedoch nicht das Element selbst. Das Blockelement wird weiterhin am linken Rand des Containers ausgerichtet.

<div style="text-align: center;">
  Ich bin ein zentrierter Text.
</div>

Verwendung von MARGIN: AUTO

Die Verwendung von margin: auto; zentriert ein Blockelement horizontal innerhalb seines Containers. Diese Methode funktioniert, indem sie gleiche Abstände links und rechts vom Element erzeugt.

<div style="display: block; margin: auto;">
  Ich bin ein zentriertes Blockelement.
</div>

Verwendung von FLEXBOX

Flexbox ist ein modernes Layout-Modul, das eine flexible und leistungsstarke Möglichkeit zur Positionierung von Elementen bietet, einschließlich des Zentrierens von Blockelementen.

<div style="display: flex; justify-content: center">
  <div>Ich bin ein zentriertes Blockelement.</div>
</div>

Verwendung von GRID

GRID, ein weiteres modernes Layout-Modul, ermöglicht die Erstellung komplexer Layouts. Es bietet eine integrierte Funktion namens place-content, mit der du Blockelemente zentrieren kannst.

<div style="display: grid; place-content: center;">
  <div>Ich bin ein zentriertes Blockelement.</div>
</div>

vorheriger Artikel

nächster Artikel

Jan

Antwort hinterlassen
Antworten abbrechen

Neue Artikel

Uncategorized