Wenn Sie eine Webseite erstellen, besteht ein wichtiger Aspekt des Designs darin, den Inhalt zu zentrieren. Das Zentrieren von Objekten hilft, ein attraktiveres Aussehen zu schaffen und die Benutzerfreundlichkeit zu verbessern. In diesem Artikel betrachten wir verschiedene Möglichkeiten, Objekte in HTML zu zentrieren, ohne CSS-Stile zu verwenden.
Der erste Weg besteht darin, das Tag zu verwenden . Es ermöglicht Ihnen, den Inhalt in sich selbst zu zentrieren. Sie können alle Objekte, die Sie zentrieren möchten, in das Tag einfügen . Zum Beispiel:
Das Tag wird jedoch nicht mehr für die Verwendung in HTML5 empfohlen und kann in zukünftigen Sprachversionen entfernt werden. Stattdessen können Sie andere Methoden zum Zentrieren von Objekten verwenden.
So erstellen Sie eine Objektzentrierung in HTML
Eine Möglichkeit zum Zentrieren von Objekten besteht darin, die CSS-Eigenschaft "text-align: center" zu verwenden. Diese Eigenschaft wird auf das übergeordnete Element angewendet, das das innere Objekt enthält, das zentriert werden soll. Zum Beispiel:
Пример центрированного текста
In diesem Beispiel wird der Text zwischen den Tags innerhalb des übergeordneten Elements zentriert.
Eine andere Möglichkeit, Objekte zu zentrieren, besteht darin, die CSS-Eigenschaft "margin" zu verwenden: auto". Diese Eigenschaft wird auf das Objekt selbst angewendet, das zentriert werden soll. Zum Beispiel:
Пример центрированного текста
In diesem Beispiel wird der Text zwischen den Tags auf der Seite zentriert.
Wenn Sie das Bild zentrieren möchten, können Sie den folgenden Code verwenden:
In diesem Beispiel wird das Bild in der Mitte der Seite angezeigt.
Mit diesen einfachen Techniken können Sie die Zentrierung verschiedener Objekte auf Ihrer Webseite erreichen und ein attraktiveres Design für die Benutzer erstellen.
Horizontal zentrieren
Es gibt mehrere Möglichkeiten, Objekte horizontal zu zentrieren:
- Verwenden der text-align-Eigenschaft: legen Sie die text-align-Eigenschaft auf center für das übergeordnete Element fest. Dadurch werden automatisch alle untergeordneten Elemente horizontal zentriert. Zum Beispiel:
Der Text
- Mit den Eigenschaften margin und display: legen Sie die Stile margin-left und margin-right für das Objekt auf auto und display auf block fest. Zum Beispiel:
Der Text
Wählen Sie je nach den Besonderheiten Ihres Projekts eine geeignete Zentrierungsmethode aus. Probieren Sie verschiedene Optionen aus und wählen Sie das bequemste und ästhetisch ansprechende für Ihr Design aus.
Vertikal zentrieren
Wenn Sie eine Webseite erstellen, müssen Sie die Blöcke oder Elemente möglicherweise vertikal zentrieren. Dies gilt insbesondere dann, wenn Sie Inhalte unabhängig von ihrer Höhe in der Mitte der Seite positionieren möchten.
Es gibt mehrere Möglichkeiten, Objekte vertikal in HTML zu zentrieren:
1. Flexbox verwenden:
Mit den Eigenschaften display: flex; und align-items: center; können Sie Inhalte vertikal innerhalb eines Blocks zentrieren. Dazu müssen Sie die Blockhöhe festlegen und die angegebenen Stile hinzufügen:
.container
2. Verwenden von Tabellen:
Wenn Sie eine Tabelle mit einer einzelnen Zelle erstellen, in der sich der Inhalt befindet, können Sie ihn vertikal zentrieren. Dazu müssen Sie die Höhe des Containers festlegen und den Zellenstil mithilfe von CSS festlegen:
.container .cell
3. Positionierung verwenden:
Mit den Eigenschaften position: absolute; und top: 50%; können Sie ein Objekt vertikal ausrichten, indem Sie die gewünschten Einrückungswerte festlegen:
.container .element
Die Auswahl der vertikalen Zentrierungsmethode hängt von Ihrer Präferenz sowie von der Unterstützung durch die Browser ab.
Beachten Sie, dass Sie bei Verwendung der letzten beiden Methoden die Höhe des Containers angeben müssen, damit das Objekt korrekt vertikal ausgerichtet ist.
CSS-Eigenschaften zum Zentrieren von Objekten
Wenn Sie eine Webseite erstellen, müssen Sie die Objekte möglicherweise so zentrieren, dass sie sich in der Mitte des Bildschirms befinden. Dazu gibt es in CSS einige nützliche Eigenschaften, die Ihnen helfen, das gewünschte Ergebnis zu erzielen.
1. text-align: center; - Mit dieser Eigenschaft können Sie den Text innerhalb eines Containers zentrieren (z. B. einen Absatz oder eine Überschrift). Gilt für das übergeordnete Element.
2. margin: 0 auto; - mit dieser Eigenschaft können Sie das Blockelement horizontal zentrieren. Der Wert "auto" für die Margin-Eigenschaft weist jedoch automatisch die gleiche Menge an Platz links und rechts neben dem Element zu. Gilt für das Element selbst.
3. display: flex; - Mit dieser Eigenschaft können Sie flexible Container erstellen, in denen Elemente in jede Richtung ausgerichtet werden können. Sie können die Eigenschaft "justify-content: center;" verwenden, um Elemente in einem Container zu zentrieren, die die Elemente horizontal ausrichten, und die Eigenschaft "align-items: center;", die die Elemente vertikal ausrichtet.
4. position: absolute; und transform: translate(-50%, -50%); - mit diesen Eigenschaften können Sie Elemente relativ zu ihrem übergeordneten Element zentrieren. Dadurch wird das Element mit der position-Eigenschaft auf absolute Positionierung festgelegt, und die transform-Eigenschaft verschiebt das Element um die Hälfte seiner Breite und Höhe nach links bzw. nach oben.
5. grid-template-columns: auto; und justify-items: center; - mit diesen Eigenschaften können Sie ein flexibles Raster erstellen und Elemente innerhalb der Gitterzellen zentrieren. Die grid-template-columns-Eigenschaft legt die Anzahl und Breite der Spalten im Raster fest, und die justify-items-Eigenschaft richtet die Elemente in den Zellen horizontal aus.
Mit diesen CSS-Eigenschaften können Sie Objekte auf Ihrer Webseite leicht zentrieren und ein ästhetisch ansprechendes Design erstellen.
text-align: center
Im HTML-Code können Sie die text-align: center-Eigenschaft verwenden, um alle Textelemente zentriert auszurichten.
Wenn Sie beispielsweise möchten, dass alle Textabsätze auf Ihrer Webseite zentriert ausgerichtet sind, können Sie den folgenden Code verwenden:
Dieser Code wird im Abschnitt Ihrer HTML-Seite platziert. Jetzt werden alle Textabsätze automatisch zentriert ausgerichtet.
Sie können diese Eigenschaft auch verwenden, um andere Elemente im HTML auszurichten, z. B. Überschriften , , , , , , Tabellen und vieles mehr.
Um beispielsweise den Titel der zweiten Ebene ( ) in der Mitte auszurichten, können Sie den folgenden Code verwenden:
Заголовок
Der Titel der zweiten Ebene wird nun auf Ihrer Webseite zentriert ausgerichtet.
Beachten Sie, dass diese Eigenschaft auf alle Elemente des angegebenen Typs angewendet wird. Daher ist es wichtig, bei der Verwendung vorsichtig zu sein und sie nur dort festzulegen, wo sie benötigt wird.
margin: auto
Um ein Blockelement zu zentrieren, müssen Sie ihm eine feste Breite zuweisen und dann die Werte festlegen margin-left und margin-right in auto.
Dieser Block wird zentriert
Auf diese Weise wird der Block unabhängig von seiner Größe und dem Bildschirm des Benutzers in der Mitte des übergeordneten Containers platziert.
Es ist wichtig zu beachten, dass diese Eigenschaft nur für Blockelemente funktioniert, nicht für Elemente im Text.
Darüber hinaus müssen auch andere Methoden zum Zentrieren vertikal verwendet werden, z. B. die Verwendung von Flexboxen oder die Positionierung.
