Wie zentriert man Text auf einer HTML-Seite mit CSS

HTML ist eine der beliebtesten Webseiten-Markup-Sprachen. Es wird verwendet, um Inhalte zu erstellen und zu strukturieren sowie das Aussehen und die Position von Elementen auf einer Seite zu bestimmen. Ein wichtiger Aspekt des Webdesigns ist die Art und Weise, wie der Text auf der Seite ausgerichtet wird. Das Zentrieren von Text ist eine der ästhetisch ansprechendsten Möglichkeiten, Inhalte darzustellen, die die Aufmerksamkeit des Lesers auf sich ziehen.

Es gibt mehrere Möglichkeiten, den Text auf einer HTML-Seite zentriert auszurichten. Eine davon ist die Verwendung der CSS-Eigenschaft text-align mit dem Wert "center". Wenn Sie diese Eigenschaft auf alle Elemente anwenden, die Text enthalten, wird der Text horizontal zentriert. Diese Eigenschaft hat jedoch keine Auswirkung auf die vertikale Ausrichtung des Textes.

Um den Text vertikal und horizontal innerhalb eines Elements auszurichten, können Sie die CSS-Methoden Flexbox oder CSS Grid verwenden. Mit der Flexbox-Methode können Sie eine flexible Struktur erstellen, die Beziehungen zwischen Elementen in einem Container festlegt. Die Grid-Methode bietet ein komplexeres Markup-System, mit dem Sie Gitter aus Elementen erstellen können.

Kapitel 1: Vorbereiten der Textausrichtung in der Mitte

Im folgenden Beispielcode wird veranschaulicht, wie eine Tabelle mit einer einzelnen Zelle erstellt wird:

Nachdem Sie die Tabelle erstellt haben, können Sie mit dem Schreiben Ihres Textes in eine Tabellenzelle fortfahren.

Verwenden eines Blocks zum Ausrichten von Text

Ваш текст

In diesem Beispiel haben wir einen Block mit einem Tag erstellt und den Text-align: center-Stil auf ihn angewendet; . Dieser Stil richtet den Text innerhalb des Blocks zentriert aus.

, . In diesem Fall müssen Sie den gleichen Text-align: center; -Stil für diese Elemente festlegen.

Beispiel mit einem Tag

:

Ваш текст

Definieren der Textblockbreite für die Ausrichtung

Um den Text auf einer HTML-Seite zentriert auszurichten, müssen Sie eine bestimmte Breite für den Textblock angeben. Dadurch kann der Container nur den gewünschten Platz auf der Seite einnehmen, anstatt sich über die gesamte Breite zu strecken.

Es gibt mehrere Möglichkeiten, die Breite eines Textblocks zu bestimmen:

1. Feste Breite

Diese Methode bestimmt die feste Breite eines Textblocks in Pixeln oder anderen Maßeinheiten. Zum Beispiel:

Dies ist ein Text mit fester Blockbreite.

In diesem Beispiel wird der Textblock 500 Pixel breit sein.

2. Prozentuale Breite

Diese Methode bestimmt die Breite des Textblocks als Prozentsatz der Breite des übergeordneten Elements. Zum Beispiel:

Dies ist ein Text mit einer prozentualen Blockbreite.

In diesem Beispiel nimmt der Textblock 50% der Breite des übergeordneten Elements ein.

Die Art und Weise, wie Sie die Breite eines Textblocks bestimmen, hängt von den Designanforderungen und dem Verwendungskontext ab. Es ist wichtig zu bedenken, dass sich der Container bei Verwendung fester Breite möglicherweise nicht an verschiedene Geräte und Bildschirmauflösungen anpasst.

Erstellen einer Klasse zum Zentrieren von Text

Das Zentrieren von Text auf einer HTML-Seite kann erreicht werden, indem eine Klasse erstellt wird, die auf das gewünschte Element angewendet wird.

Verwenden Sie den folgenden CSS-Code, um eine Klasse zum Zentrieren von Text zu erstellen:

In diesem Code erhält die Klasse den Namen "center-text", der nach Ihrem Ermessen geändert werden kann.

Um diese Klasse auf Text anzuwenden, müssen Sie sie in das Tag des Elements einfügen, das Sie zentrieren möchten:

Der Text, der zentriert werden soll

Im obigen Code wird die Klasse "center-text" auf das Element "p" angewendet, sie kann jedoch auch auf andere Elemente wie Überschriften, Absätze usw. angewendet werden.

Nachdem die Klasse nun angewendet wurde, wird der Text innerhalb des Elements horizontal zentriert.

Kapitel 2: Zentrierter Text mit CSS-Eigenschaften ausrichten

In HTML kann der Text mit Hilfe von CSS-Eigenschaften zentriert ausgerichtet werden. Es können verschiedene Ansätze verwendet werden, um dies zu tun.

• Verwenden der text-align-Eigenschaft
• Verwenden der Margin-Eigenschaft
• Mit flexbox

Eine der einfachsten Möglichkeiten, Text zentriert auszurichten, besteht darin, die text-align-Eigenschaft zu verwenden. Um dies zu tun, müssen Sie den Stil einfach auf den Textcontainer anwenden:

Eine andere Möglichkeit besteht darin, die Margin-Eigenschaft mit dem Wert auto zu verwenden. Um dies zu tun, wenden Sie einen Stil auf den Textcontainer an:

Sie können auch Flexbox verwenden, um Text zentriert auszurichten. Legen Sie dazu die Eigenschaft justify-content für den Flexcontainer auf center fest:

Unabhängig von der gewählten Methode ist es wichtig, sich daran zu erinnern, dass der Text nur innerhalb seines übergeordneten Containers zentriert wird. Es sollte auch berücksichtigt werden, dass diese Methoden die Ausrichtung anderer Elemente im Container beeinflussen können.

Verwenden der text-align-Eigenschaft zum Zentrieren von Text

Um den Text zentriert auszurichten, müssen Sie den Wert center auf die text-align-Eigenschaft anwenden. Zum Beispiel:

Beispiel für zentrierten Text

Auf diese Weise wird der gesamte Text innerhalb des Elements mit dem angegebenen Stil zentriert ausgerichtet.

• Erster Punkt
• Zweiter Punkt
• Dritter Punkt

Der gesamte Text innerhalb dieser Elemente wird nun zentriert ausgerichtet.

Die text-align-Eigenschaft kann auch mithilfe des style-Attributs auf einzelne Zeilen innerhalb eines Elements angewendet werden. Zum Beispiel:

Dieser Text wird zentriert ausgerichtet .

Auf diese Weise können Sie festlegen, dass der Text innerhalb bestimmter Elemente oder sogar einzelner Zeilen zentriert ausgerichtet wird.

Anwenden der Margin-Eigenschaft, um den Text zentriert auszurichten

In HTML können Sie die Margin-Eigenschaft verwenden, um den Text auf der Seite zentriert auszurichten. Mit dieser Eigenschaft können Sie Elemente einrücken und so deren Position auf der Seite steuern.

Um den Text zentriert auszurichten, müssen Sie beispielsweise ein Containerelement erstellen oder

. und fügen Sie ihm Stile mit dem style-Attribut oder einer externen CSS-Datei hinzu.

Im folgenden Codebeispiel wird veranschaulicht, wie die Margin-Eigenschaft verwendet wird, um Text zentriert auszurichten:

Этот текст будет выровнен по центру

In diesem Beispiel wird die text-align: center-Eigenschaft verwendet, um den Text innerhalb des Containers zentriert auszurichten, und die margin: auto-Eigenschaft erstellt automatische Einrückungen, die den Container auf der Seite zentrieren.

Bei diesem Ansatz ist es wichtig zu berücksichtigen, dass die Margin-Eigenschaft nur für Blockelemente funktioniert. Wenn Sie es auf kleinformatige Elemente anwenden, z. B.

oder es wird keine sichtbare Wirkung haben.

Wenn Sie den Text innerhalb eines bereits vorhandenen Blockelements zentriert ausrichten möchten, können Sie den folgenden Code verwenden:

Этот текст будет выровнен по центру

Mit diesem Ansatz können Sie den Text auf der HTML-Seite mithilfe der Margin-Eigenschaft leicht zentriert ausrichten.

Verwenden eines Flexboxes zum Zentrieren von Text

Sie können die Flexbox verwenden, um den Text in der Mitte einer HTML-Seite auszurichten, mit der Sie die Position von Elementen auf einer Seite steuern können.

Zuerst müssen Sie einen Container erstellen, in dem der Text platziert werden soll. Dazu wird ein Tag mit der Klasse "container" verwendet, zum Beispiel:

Als nächstes müssen Sie in der CSS-Datei Stile für den Container hinzufügen:

.container

Mit der Eigenschaft display: flex; geben wir dem Container ein Flexbox-Modell an, und die Eigenschaften justify sind content: center; und align-items: center; richten den Inhalt des Containers horizontal bzw. vertikal aus.

Jetzt werden alle Elemente, die sich innerhalb des Containers befinden, zentriert ausgerichtet. Wenn Sie beispielsweise Text zentrieren möchten, fügen Sie ihn in einen Container ein:

Текст, который нужно выровнять по центру

                        
                            
                        
                    

Auf diese Weise wird der Text beim Öffnen der HTML-Seite automatisch zentriert.

Kapitel 3: Zentrierter Text mit HTML-Tags ausrichten

Mit den folgenden HTML-Tags können Sie den Text zentriert ausrichten:

• Der Text

  : Richtet den Text innerhalb eines Absatzes zentriert aus.
• Der Text
  : Richtet den gesamten Text innerhalb des Blocks zentriert aus.
• Der Text : Richtet den gesamten Text innerhalb des Tags aus in der Mitte. Beachten Sie, dass das Tag ist veraltet und wird nicht für die Verwendung in neuen Projekten empfohlen.

Beispiel für die Verwendung eines Tags

:

Этот текст выровнен по центру.

Beispiel für die Verwendung eines Tags :

Этот текст выровнен по центру.

Beachten Sie, dass diese Tags in anderen Containern platziert werden müssen, z. B. in oder , damit sie Auswirkungen auf den gesamten Inhalt der Seite haben.

Mit diesen einfachen HTML-Tags können Sie den Text leicht zentriert ausrichten und ein ansprechendes Design für Ihre Website erstellen.

Verwenden des Center-Tags zum Zentrieren von Text

Um das Center-Tag zu verwenden, müssen Sie den zu zentrierenden Text innerhalb des öffnenden und schließenden Tags umbrechen:

Auf diese Weise werden alle Textinformationen, die sich zwischen den Center-Tags befinden, automatisch in der Mitte der Seite ausgerichtet.

Es sollte jedoch beachtet werden, dass die Verwendung des Center-Tags in modernen HTML-Standards nicht empfohlen wird. Stattdessen wird empfohlen, CSS zu verwenden, um den Stil und die Position der Elemente auf der Seite zu steuern.

Anwenden des Align-Attributs, um den Text zentriert auszurichten

Ein Beispiel für die Verwendung des align-Attributs zum Zentrieren von Text sieht folgendermaßen aus:

Der Text, den Sie zentrieren möchten

In diesem Beispiel ist das Tag

wird verwendet, um Text zu platzieren und das align-Attribut mit dem Wert "center" anzuwenden. Im Inneren befindet sich eine Zeile, die durch das Tag repräsentiert wird , und eine Datenzelle, die durch das Tag repräsentiert wird

Wenn Sie also das Attribut align mit dem Wert "center" verwenden, können Sie den Text in der Mitte der Seite ausrichten. Diese Methode ist praktisch und einfach zu bedienen und kann auf verschiedene Elemente angewendet werden, die Text auf einer HTML-Seite enthalten.

Verwenden von Tabellen zum Zentrieren von Text

Tabellen können verwendet werden, um Text auf einer HTML-Seite zu zentrieren. Dazu müssen Sie eine Tabelle mit einer einzelnen Zelle erstellen und den entsprechenden CSS-Stil anwenden.

• Erstellen Sie eine Tabelle mit einer einzelnen Zelle, die Ihren Text enthält:

```HTML

• Wenden Sie den CSS-Stil auf die Tabelle an:

```CSStable ```

• Beachten Sie die Eigenschaft display: flex; - Damit können Sie den Inhalt der Zelle horizontal und vertikal zentrieren.

Nachdem Sie diese Stile angewendet haben, wird Ihr Text in der Mitte der Seite ausgerichtet.