Beim Erstellen von Webseiten ist die Ausrichtung von Elementen einer der wichtigsten Aspekte, um ihnen ein ästhetisches Aussehen zu verleihen. Eine der häufigsten Aufgaben besteht darin, ein Element in der Mitte auf einer Seite zu platzieren. In diesem Artikel betrachten wir verschiedene Möglichkeiten, Elemente mithilfe von CSS in der Mitte auszurichten.
Die erste und einfachste Möglichkeit, ein Element zentriert auszurichten, besteht darin, die text-align-Eigenschaft mit dem center-Wert des übergeordneten Elements zu verwenden. Wenn wir zum Beispiel den Titel zentriert ausrichten möchten, können wir den folgenden CSS-Code hinzufügen:
Diese Methode funktioniert jedoch nur für Blockelemente oder Elemente mit display: inline-block. Wenn Sie Inline-Elemente wie oder horizontal zentrieren möchten, müssen Sie dem Element zusätzliche Stile hinzufügen:
span
Mit der Flexbox-Eigenschaft können Sie Elemente auch einfach horizontal und vertikal zentrieren. Setzen Sie einfach die display-Eigenschaft des übergeordneten Elements auf flex und fügen Sie die justify-content-Eigenschaft mit dem Wert center für die horizontale Ausrichtung und die align-items-Eigenschaft mit dem Wert center für die vertikale Ausrichtung hinzu:
.container
Daher gibt es mehrere Möglichkeiten, Elemente mit CSS in der Mitte auszurichten, abhängig von Ihren Anforderungen und den Arten von Elementen, auf die die Zentrierung angewendet wird. Mit den vorgeschlagenen Methoden können Sie ästhetische und professionell aussehende Webseiten erstellen.
Vorbereitung für die Ausrichtung
Bevor Sie mit dem Zentrieren von Elementen mit CSS beginnen, müssen Sie sicherstellen, dass sich das Element, das Sie ausrichten möchten, in einem anderen Container oder Block befindet. Dieser Container fungiert als übergeordnetes Element.
Das übergeordnete Element muss über eine grundlegende Struktur und einen Stil verfügen. Sie können dazu Typcontainer oder Flexboxen verwenden. Stellen Sie den Behälter so ein, dass seine Breite und Höhe Ihren Bedürfnissen entspricht.
Wenn Sie einen geeigneten Behälter haben, fügen Sie das Element hinzu, das Sie zentriert ausrichten möchten. Dieses Element kann sowohl Text als auch ein grafisches Objekt sein, z. B. ein Bild oder ein Logo.
Es ist wichtig sicherzustellen, dass das Element, das Sie ausrichten möchten, seine eigenen Stile hat. Dadurch können Sie seine Positionierung und sein Aussehen leicht steuern.
Im nächsten Abschnitt werden wir die verschiedenen Methoden zum Zentrieren von Elementen mithilfe von CSS untersuchen.
Auswählen eines Elements
Bevor Sie ein Element zentriert anzeigen können, müssen Sie es zuerst in Ihrem HTML-Code auswählen. Dazu können Sie verschiedene Selektoren verwenden.
Mit Selektoren können Sie angeben, auf welche Elemente der CSS-Stil angewendet werden soll. Hier sind einige Beispiele für grundlegende Selektoren:
- Selektor nach Tagname: Dies ist der einfachste Weg, um alle Elemente eines bestimmten Typs auszuwählen. Zum Beispiel wählt p alle Tags aus
auf der Seite.
- Selektor nach ID: Die ID ist für jedes Element auf der Seite eindeutig und kann verwendet werden, um ein bestimmtes Element auszuwählen. Zum Beispiel wählt #my-element ein Element mit dem Attribut id="my-element" aus.
- Klassenselektor: Klassen können auf mehrere Elemente angewendet werden, um ihre Stile zu gruppieren. Zum Beispiel,.my-class wählt alle Elemente mit dem Attribut class="my-class" aus.
- Selektor nach Attribut: Sie können Elemente basierend auf ihren Attributen auswählen. Zum Beispiel, [href] wählt alle Elemente mit dem href-Attribut aus.
Nachdem Sie das gewünschte Element ausgewählt haben, können Sie die Stile mithilfe von CSS-Eigenschaften wie margin , padding und text-align anwenden , um es in der Mitte der Seite anzuzeigen.
Anmerkung: Beachten Sie, dass das Anwenden von Stilen auf ein Element mithilfe einer Klasse oder eines Bezeichners das Hinzufügen eines entsprechenden Attributs zum HTML-Element erfordert. Um beispielsweise die Klasse .my-class zu verwenden, müssen Sie dem Element das Attribut class="my-class" hinzufügen.
