Text in HTML zentrieren

Autor: Tamara Smith
Erstelldatum: 28 Januar 2021
Aktualisierungsdatum: 1 Juli 2024
Anonim
5 Wege um Inhalt ganz einfach mit CSS zu zentrieren!
Video: 5 Wege um Inhalt ganz einfach mit CSS zu zentrieren!

Inhalt

In diesem Wiki erfahren Sie, wie Sie Text in einer HTML-Website zentrieren. Wir verwenden hierfür CSS (Cascading Style Sheets oder Stylesheets). Früher haben wir HTML mit dem zentriert Mitte>Tag, aber dies funktioniert in den meisten Browsern nicht mehr.

Schreiten

Methode 1 von 2: Verwenden von CSS

  1. Öffnen Sie die Textdatei, in der Sie Ihre Stile beschreiben. Jetzt die Mitte>Das Tag wird nicht mehr verwendet. Erstellen Sie in dieser Datei ein neues Element, das den Text in bestimmten Bereichen Ihres HTML-Dokuments zentriert. Wenn Sie keine separate CSS-Datei haben, befinden sich die Codes oben im HTML-Dokument zwischen den Tags "style>" und "/ style>".
    • Als die Stil>- und / style>Tags sind noch nicht da, du kannst sie direkt unter dem platzieren Körper>Tag auf folgende Weise:
    • ! DOCTYPE html> html> body> style> / style>

  2. Erstellen Sie eine Klasse, die Text zentriert. Das div>Das Tag teilt Ihrem HTML-Dokument mit, zu welchem ​​bestimmten Abschnitt diese Klasse gehört. Geben Sie zwischen den "Stil" -Tags Folgendes ein und klicken Sie zweimal darauf ↵ Geben Sie ein nach der ersten Zeile:

      div.a {}

  3. Ergänzen Sie die TextausrichtungEigentum. Art Textausrichtung: Mitte; zwischen den Klammern in der Diva-Sektion. Der "Header" sieht jetzt so aus:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style>

  4. Fügen Sie die richtige hinzu divMarkieren Sie den Text, den Sie zentrieren möchten. Sie tun dies durch die div>Tag über diesem Text und schließen Sie ihn mit einem / div>Tag unter diesem Text. Wenn Sie beispielsweise einen Titel und den Absatz darunter zentrieren möchten, sieht dies folgendermaßen aus:

      div> h1> Willkommen auf meiner Website / h1> p> Diese Website dient hauptsächlich der Bereitstellung von Informationen über Dinge./p> / div>

  5. Verwenden Sie die DivaTag, um andere Elemente zu zentrieren. Wenn Sie ein anderes Element zentrieren möchten, z. B. den Inhalt zwischen den Tags p> / p> und h2> / h2>), du tippst div> für dieses Element und / div> danach. Da Sie "div.a" bereits als zentrierenden CSS-Code definiert haben, werden diese Elemente jetzt auch zentriert.

      style> div.a {text-align: center; } / style> div> h2> Spenden sind willkommen / h2> p> bitte / p> / div>

  6. Überprüfen Sie Ihr Dokument. Obwohl der Text auf Ihrer Webseite natürlich anders ist, sollte er ungefähr so ​​aussehen:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Willkommen auf meiner Website / h1> p> Diese Website dient hauptsächlich zur Bereitstellung von Informationen über Dinge. / p> / div> div> h2> Spenden sind willkommen / h2> p> bitte / p> / div> / body> / html>

Methode 2 von 2: Verwenden des "center" -Tags in HTML

  1. Öffnen Sie Ihr HTML-Dokument. Diese Methode beschreibt, wie Sie das Veraltete erhalten Mitte>Etikett. Diese Methode funktioniert möglicherweise immer noch in einer Reihe von Browsern, aber es ist am besten, sich nicht zu sehr darauf zu verlassen.
  2. Suchen Sie den Text, den Sie zentrieren möchten. Scrollen Sie in Ihrem Dokument nach unten, bis Sie den Titel, Absatz oder anderen Text finden, den Sie zentrieren möchten.
  3. Platzieren Sie das "Center" -Tag auf beiden Seiten des Textes. Der Code sieht so aus Mitte> Text / Mitte>. Hier ist "Text" der zu zentrierende Text. Wenn dieser Text andere Tags enthält, z. B. "p> / p>" vor einem Absatz, platzieren Sie die "center" -Tags außerhalb der vorhandenen Tags.

      center> h1> Willkommen auf meiner Website / h1> / center> center> Machen Sie es sich bequem! / center>

  4. Überprüfen Sie Ihr HTML-Dokument. Es sollte ungefähr so ​​aussehen:

      ! DOCTYPE html> html> body> h1> center> Willkommen auf meiner Website / center> / h1> center> Machen Sie es sich einfach! / Center> p1> Diese Website dient hauptsächlich dazu, Informationen über Dinge bereitzustellen./p1> / body > / html>