Das Zentrieren von Elementen auf einer Webseite ist eine der Hauptaufgaben beim Erstellen eines Designs. Dies ermöglicht eine ästhetischere und ausgewogenere Darstellung der Website, verbessert die visuelle Wahrnehmung und Benutzerfreundlichkeit.
Es gibt einige einfache Möglichkeiten, Elemente auf einer Seite in HTML zu zentrieren, ohne CSS- oder JavaScript-Stile zu verwenden. Eine der häufigsten Methoden besteht darin, ein HTML-Tag zu verwenden
mit bestimmten Attributen und Elementen oder zum Markieren von Text.
Um beispielsweise Text zu zentrieren, können Sie das folgende Konstrukt verwenden:
Dadurch wird ein Absatz mit zentriertem Text erstellt.
Wenn Sie einen Block mit einem Bild oder einem anderen Element zentrieren möchten, können Sie das Tag mit dem class-Attribut verwenden und ihm einen Breiten- und Höhenstil zuweisen und die Margin-Eigenschaft mit Auto-Werten verwenden, um das Element horizontal und vertikal zu zentrieren.
Um beispielsweise ein Bild zu zentrieren, können Sie das folgende Konstrukt verwenden:
.centered-block width: 300px;
height: 200px;
margin: auto;
>
Dadurch wird ein Block mit einem Bild erstellt, das sowohl horizontal als auch vertikal zentriert ist.
Wie richtet man Elemente in der Mitte einer Seite in HTML aus?
Methode 1: Verwenden von CSS
Sie können CSS-Stile verwenden, um Elemente in der Mitte der Seite in HTML auszurichten. Der folgende Code kann dem Abschnitt ` hinzugefügt werden
Anschließend können Sie im HTML-Markup einen Container erstellen und die Elemente einfügen, die Sie ausrichten möchten:
Methode 2: Verwenden von Tabellen
Eine andere Möglichkeit, Elemente in der Mitte der Seite in HTML auszurichten, besteht darin, Tabellen zu verwenden. In HTML5 wird empfohlen, CSS für das Styling zu verwenden, Tabellen können jedoch in einigen Fällen nützlich sein. Der folgende Code zeigt, wie eine Tabelle verwendet wird, um Elemente zentriert auszurichten:
Methode 3: Verwenden des Tags 'text-align`
Eine weitere einfache Möglichkeit, Elemente in der Mitte der Seite in HTML auszurichten, besteht darin, die Eigenschaft `text-align` zu verwenden. Diese Eigenschaft kann auf das übergeordnete Element angewendet werden und richtet den gesamten Inhalt zentriert aus. Zum Beispiel:
Es ist wichtig zu bedenken, dass diese Methoden nur wenige Möglichkeiten zeigen, Elemente in der Mitte der Seite in HTML auszurichten. Abhängig von Ihrer spezifischen Situation und Ihren Anforderungen benötigen Sie möglicherweise andere Methoden und Ansätze.
Verwenden der Flexbox zum Zentrieren
Um flexbox zu verwenden, müssen Sie die Eigenschaft display: flex; für das übergeordnete Element festlegen. Dadurch werden seine untergeordneten Elemente in flexible Blöcke umgewandelt.
Um die Elemente dann horizontal auszurichten, müssen Sie die Eigenschaft justify-content: center; für das übergeordnete Element festlegen. Dadurch werden alle untergeordneten Elemente horizontal zentriert.
Um Elemente vertikal auszurichten, müssen Sie die Eigenschaft align-items: center; für das übergeordnete Element festlegen. Dadurch werden alle untergeordneten Elemente vertikal zentriert.
Wenn Sie Elemente sowohl horizontal als auch vertikal ausrichten möchten, können Sie die Eigenschaft align-items: center; in Verbindung mit justify-content: center; verwenden.
| Flexbox-Eigenschaft | Die Beschreibung |
| display: flex; | Verwandelt das übergeordnete Element in einen flexiblen Block |
| justify-content: center; | Zentriert Elemente horizontal |
| align-items: center; | Zentriert Elemente vertikal |
Die Verwendung von Flexbox zum Zentrieren von Elementen ist eine bequeme und effektive Möglichkeit, flexible Layouts in HTML und CSS zu erstellen. Es ermöglicht Ihnen, die Ausrichtung von Elementen leicht zu steuern, ohne komplexe Stile und Skripte zu verwenden.
Zentrieren eines Elements mit text-align
Этот текст будет размещен по центру
In diesem Beispiel haben wir ein div-Element erstellt und die text-align-Eigenschaft mit dem Wert center darauf angewendet. Als Ergebnis wird der Text innerhalb dieses Div-Elements zentriert ausgerichtet.
Sie können diese Eigenschaft auch auf andere Elemente wie Überschriften oder Absätze anwenden. Zum Beispiel mit style="text-align: center;". Wir können einen Absatz wie folgt zentrieren:
Этот абзац будет размещен по центру
Es ist jedoch erwähnenswert, dass diese Eigenschaft nur den Inhalt des Elements zentriert, nicht jedoch das Element selbst. Wenn Sie das Element selbst horizontal zentrieren müssen, können Sie andere Zentrierungsmethoden verwenden, z. B. die Verwendung von Flexbox oder grid.
Anwenden der Margin-Eigenschaft auf die zentrierte Ausrichtung
Wenn Sie beispielsweise einen Block mit einer bestimmten Größe haben und ihn in der Mitte der Seite platzieren möchten, können Sie den folgenden CSS-Code verwenden:
In diesem Beispiel haben wir die Breite und Höhe des Blocks festgelegt und die Eigenschaften margin-left und margin-top auf negative Werte festgelegt, die jeweils der Hälfte der Breite und Höhe des Blocks entsprechen. Wir haben dann die Werte von 50% für die Eigenschaften top und left verwendet, um den Block in der Mitte der Seite zu platzieren.
Dieser Ansatz ermöglicht das gewünschte Ergebnis, aber Sie sollten bedenken, dass solche Elemente hinsichtlich der Verfügbarkeit unsicher sein können und Skalierungsprobleme und ansprechendes Design verursachen können.
Verwenden der absoluten Positionierung zum Zentrieren
Führen Sie die folgenden Schritte aus, um ein Element mit absoluter Positionierung zu zentrieren:
- Legen Sie die Positionierung des übergeordneten Containers auf relative oder absolute fest.
- Legen Sie für das zu zentrierende Element selbst die absolute Positionierung mithilfe der Eigenschaft position: absolute; fest.
- Legen Sie für das zu zentrierende Element die Werte top: 50%; left: 50% fest, um es an einen Punkt zu verschieben, der 50% vom oberen und linken Rand des übergeordneten Containers entfernt ist.
- Transform-Eigenschaften verwenden: translate(-50%, -50%); um ein Element genau in seiner Mitte zu zentrieren.
Beispiel für die Verwendung der absoluten Positionierung zum Zentrieren:
.container .centered-element Текст
In diesem Beispiel wird ein übergeordneter Container mit der container-Klasse erstellt. Darin wird dann ein Element mit der Klasse "centered-element" erstellt, das den zentrierten Text enthält. Mithilfe der Positionierungs- und Transformationseigenschaften wird ein Element mit der Klasse "centered-element" vertikal und horizontal innerhalb des übergeordneten Containers mit der Klasse "container" zentriert.
Durch die Verwendung der absoluten Positionierung in Verbindung mit der Transformation können Elemente auf der Seite leicht zentriert werden.
Zentriert mit CSS-Tabellen ausrichten
Hier ist ein Beispielcode, der diesen Ansatz veranschaulicht:
In der Tabelle stellen wir die Breite und Höhe auf 100% ein, so dass sie den gesamten verfügbaren Bereich auf der Seite einnimmt. Dann erstellen wir eine Zeile und eine Zelle innerhalb der Tabelle, in der wir unsere Elemente platzieren werden.
Beachten Sie, dass wir in der Zelle Stile verwenden, um den Inhalt zentriert auszurichten. Setzen Sie die text-align-Eigenschaft auf center für die horizontale Ausrichtung und die vertical-align-Eigenschaft auf middle für die vertikale Ausrichtung.
Wenn wir beispielsweise den Titel und die Schaltfläche zentriert ausrichten möchten, können wir sie innerhalb der Zelle hinzufügen:
Auf diese Weise können wir mit CSS-Tabellen eine zentrierte Ausrichtung der Elemente auf einer Webseite erreichen, ohne komplexe CSS-Eigenschaften oder JavaScript verwenden zu müssen.
