Wie kann ich Text (horizontal und vertikal) in einem div zentrieren?

Wie Kann Ich Text Horizontal Und Vertikal In Einem Div Zentrieren



Beim Entwerfen von Webseiten können Entwickler verschiedene Komponenten hinzufügen, darunter Bilder, Text, Tabellen und andere. Darüber hinaus kann Text in einem div mithilfe mehrerer CSS-Eigenschaften zentriert ausgerichtet werden. Die beliebteste Methode zum horizontalen Zentrieren von Text ist die Verwendung des „ Textausrichtung ” Attribut. Darüber hinaus können Sie auch die „ Zeilenhöhe ' Und ' vertikal ausrichten ”-Attribute zum vertikalen Ausrichten des Textes.

In diesem Beitrag wird die Methode zum vertikalen und horizontalen Zentrieren des Textes innerhalb eines div. angegeben:





Wie zentriert man Text horizontal in einem div?

Um Text horizontal innerhalb eines div zu zentrieren, sehen Sie sich das angegebene Verfahren an.



Schritt 1: Erstellen Sie einen div-Container



Erstellen Sie zunächst einen div-Container mit Hilfe des „

' Element. Fügen Sie dann ein „ Ausweis ”-Attribut innerhalb des öffnenden div-Tags. Betten Sie danach etwas Text zwischen dem div-Tag ein:



< div Ausweis = 'Inhalt ausrichten' >
Linuxhint ist eine der besten Websites für Inhaltserstellung.
div >


Ausgang


Schritt 2: Greifen Sie auf den div-Container zu, um den Text zu zentrieren



Greifen Sie nun mit Hilfe des „ Ausweis „Attributname mit Selektor“ # “ und wenden Sie die folgenden CSS-Eigenschaften an:

#align-content{
Breite: 80 % ;
Rand: 0 Auto;
Polsterung: 20px;
Hintergrund: #c8edf3;
Textausrichtung: Mitte;
Farbe: rgb ( 49 , fünfzehn , 240 ) ;
}


Hier:

    • „ Breite ”-Eigenschaft wird zum Festlegen der Breitengröße des Containers verwendet.
    • „ Rand ” gibt ein Leerzeichen außerhalb des Containers an.
    • „ Polsterung “ definiert einen Raum innerhalb der Begrenzung des Elements.
    • „ Hintergrund ” legt die Hintergrundfarbe auf der Rückseite des Elements fest.
    • „ Textausrichtung ”-Eigenschaft wird verwendet, um die Ausrichtung des Textes als “ Center “.
    • „ Farbe ” gibt eine Farbe für den Text innerhalb der Grenze an.

Es kann beobachtet werden, dass wir den ausgerichteten Text erfolgreich horizontal innerhalb des erstellten div zentriert haben:

Wie zentriert man Text vertikal in einem div?

Um Text in einem div-Container vertikal zu zentrieren, befolgen Sie die bereitgestellten Anweisungen.

Schritt 1: Greifen Sie auf den div-Container zu

Greifen Sie zunächst auf den erstellten div-Container zu.

Schritt 2: CSS-Eigenschaften anwenden, um Text vertikal zu zentrieren

Wenden Sie dann die unten aufgeführten CSS-Eigenschaften an, um Text vertikal in einem div zu zentrieren:

#align-content{
Anzeige: Tabellenzelle;
Breite: 300px;
Höhe: 150px;
Polsterung: 10px;
Farbe blau;
Hintergrundfarbe: rgb ( 248 , 215 , 166 ) ;
Rand: 3px gestrichelt #f09d03;
vertikale Ausrichtung: Mitte;
}


Gemäß dem obigen Code-Snippet:

    • Stellen Sie das „ Anzeige “, der das Anzeigeverhalten des Elements als „ Tabellenzelle “, was bedeutet, dass es sich wie die Zelle der Tabelle im div-Element verhält.
    • „ Breite ”-Eigenschaft gibt die Größe der Elementbreite an.
    • „ Höhe ” legt die Höhe des Elements fest.
    • „ Polsterung ” definiert ein Leerzeichen innerhalb des Elements.
    • „ Farbe “ wird verwendet, um die Farbe des Textes innerhalb des Elements festzulegen.
    • „ Hintergrundfarbe “ gibt die Farbe der Rückseite des Elements an.
    • „ Grenze ”-Eigenschaft definiert eine Grenze für ein Element.
    • „ vertikal ausrichten ”-Eigenschaft wird verwendet, um die vertikale Ausrichtung eines definierten Elements in der „ Mitte “.

Ausgang


Sie haben das vollständige Verfahren kennengelernt, um den Text sowohl vertikal als auch horizontal im Container zu zentrieren.

Abschluss

Um den Text vertikal und horizontal innerhalb eines div zu zentrieren, erstellen Sie zunächst einen div-Container mit Hilfe des

-Elements und greifen Sie darauf zu, indem Sie den Selektor verwenden. Wenden Sie dann CSS-Eigenschaften an, in denen das „ Textausrichtung ”-Eigenschaft wird für die horizontale Ausrichtung verwendet, und “ vertikal ausrichten ” legt die vertikale Ausrichtung fest. Dieser Beitrag demonstrierte die Methoden zum vertikalen und horizontalen Zentrieren des Textes innerhalb eines div.

Andere

Kategorie

Beliebte Beiträge

Wie akzeptiere ich Eingaben von der Befehlszeile in Node.js?

Lösungen für die Probleme von Kapitel 4 der vollständigen Online-Datenbank für Informatik und des Internet-Karrierekurses von Anfang an

So lassen Sie Pop-ups in Google Chrome zu

So verwenden Sie rand() in C++

Aktivieren Sie die automatische Sitzungseröffnung in Windows

Maximale Spannung, die Arduino Nano aufnehmen kann

So installieren Sie Terminator auf Raspberry Pi

So implementieren Sie die Tiefensuche (DFS) in C++

So verwenden Sie Emojis in Windows 10

Anzeigetreiber reagiert nicht mehr und wurde wiederhergestellt

So deaktivieren Sie einen Link nur mit CSS

So schalten Sie RetroPie sicher aus

Was ist die Window moveTo()-Methode?

Die besten Scanner für den PC und wie man einen Scanner auswählt

Wie finde ich Normen in MATLAB?

Wie übernehme ich eine IAM-Rolle mit AWS CLI?

Wie teile ich den Bildschirm auf Discord Mobile?

Java hashCode()

Was ist Character.toUpperCase() in Java?

Wie portiere ich auf die Buffer.from()/Buffer.alloc() API in Node.js?