Webentwickler verlassen sich auf Überschriften, wenn sie einen wichtigen Textabschnitt auf der Webseite hervorheben möchten. Überschriften können verwendet werden, um verschiedene Ziele zu erfüllen. Der Hauptzweck bleibt jedoch derselbe, und das soll wichtige Text betonen oder einen Abschnitt von einem anderen trennen. Standardmäßig sind die Überschriften nach links ausgerichtet; Um die Aufmerksamkeit des Besuchers zu erregen und ihn sichtbarer zu machen, können Sie die Überschrift in die Mitte einstellen.

Dieser Leitfaden zeigt, wie man H1 in CSS zentriert.

Wie man H1 in CSS zentriert?

Um das H1 zu zentrieren, werden wir die folgenden CSS -Eigenschaften verwenden:

• textausrichtung Eigenschaft
• Eigenschaft anzeigen
• Positionseigenschaft

Beginnen wir mit Method One!

Methode 1: verwenden

In CSS, die “TextausrichtungDie Eigenschaft wird verwendet, um den Text der HTML -Elemente links, Mitte oder rechte horizontal festzulegen. Im Allgemeinen können wir sagen, dass diese Eigenschaft sehr nützlich für die Textausrichtung ist.

Hier sehen Sie sich das Beispiel unten an, um zu verstehen.

Beispiel

Wir haben eine Anhörung auf der Webseite, die derzeit standardmäßig auf der linken Seite ausgerichtet ist. Lassen Sie uns diesen Weg in die Mitte bringen:

Legen Sie in der HTML -Datei die fest

Tag im Körperabschnitt und fügen Sie ihm einen Text hinzu.

Html

Meine Überschrift

In der CSS -Datei werden wir das verwendenTextausrichtung”Eigenschaft und setzen Sie ihren Wert auf die“Center”. Dadurch werden die Überschrift H1 auf die Mitte ausgerichtet.

CSS

H1
Text-Align: Mitte;

Speichern Sie den Code und öffnen Sie ihn im Browser:

Wie Sie sehen können, haben wir den H1 mit CSS Text-Align-Eigenschaft erfolgreich zentriert.

Methode 2: Verwenden Sie die Anzeigeeigenschaft, um H1 in CSS zu zentrieren

Wenn es darum geht, das Verhalten des HTML -Elements zu definieren, das “AnzeigeEigenschaft wird verwendet. Diese Eigenschaft hat einige nützliche Werte wie Flex und Block. Darüber hinaus ist das flexible Verhalten von Elementen ein Ergebnis des Flexwerts, und das Blockverhalten von Elementen ist ein Ergebnis des Blockwerts.

Beispiel

Geben Sie zunächst das an “Anzeige”Eigenschaft und ihr Wert für die“biegen”. Dadurch wird das Überschriftenelement flexibel. Verwenden Sie im nächsten Schritt die “Rechtfertigungsbekämpfung”Eigenschaft mit dem Wert“Center”Um die Überschrift in die Mitte zu setzen.

CSS

H1
Anzeige: Flex;
Justify-Content: Center;

Ausgang

Die Überschrift H1 ist erfolgreich auf die Mitte ausgerichtet.

Methode 3: Verwenden Sie die Positionseigenschaft, um H1 in CSS zu zentrieren

Das "PositionEigenschaft ist selbsterklärend; Es entscheidet, wie ein HTML -Element an einer Position platziert wird. Die Kombination dieser Eigenschaft mit anderen CSS -Eigenschaften führt dazu, dass das gewünschte Ziel erreicht wird, nämlich die Überschrift H1 in CSS.

Beispiel

Um das H1 zu zentrieren, das “Position"Eigenschaft kann mit dem Wert verwendet werden"relativ”. Dadurch wird die normale Position des Elements neu angeordnet. Verwenden Sie nun die “links"Eigenschaft und setzen Sie ihren Wert auf"40%Um einen Raum von der linken Seite zu schaffen, wird erstellt, und unsere Überschrift wird auf die Mitte ausgerichtet.

CSS

H1
Position: Relativ;
Links: 40%;

Ausgang

Wir haben die einfachsten Methoden zum Zentrum von H1 in CSS erklärt.

Abschluss

Um H1 zu zentrieren, das CSS “Textausrichtung","Anzeige", oder "PositionEigenschaften können verwendet werden. Für den genannten Zweck wird die text-align-Eigenschaft mit der „verwendet“ verwendetCenter"Die Anzeigeeigenschaft wird mit der" verwendet "biegen"Wert, und wir werden den Wert des Positionseigenschaft einstellen"relativ”Um das gewünschte Ergebnis zu erzielen. In diesem Artikel wurde mit der Zentrum von H1 mit verschiedenen CSS -Eigenschaften behandelt.