Text in HTML zentrieren

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

PDF download PDF herunterladen

In diesem wikiHow zeigen wir dir, wie du mit CSS (Cascading Style Sheets) Text in einer HTML-Webseite zentrierst. Du kannst Text auch mit dem Tag <center> zentrieren, aber dieser Tag wird als veraltet angesehen und funktioniert in den meisten Browsern nicht mehr. [1]

Methode 1
Methode 1 von 2:

Mit CSS

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/da\/2974143-7.jpg\/v4-460px-2974143-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/da\/2974143-7.jpg\/v4-728px-2974143-7.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Auch wenn das Tag <center> veraltet ist, kannst du in einem beliebigen Bereich einer Seite ein neues Element erstellen, um Text dazwischen zu zentrieren. Wenn du keine separate Datei für dein CSS hast, findest du die Styles oben in der HTML-Datei zwischen den Tags "<style>" und "</style>". [2]
    Werbeanzeige
  • Wenn du die Tags <style> und </style> noch nicht hast, füge sie oben in der Datei direkt unter <body> ein, etwa so: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 </ 
 style 
 >
  • Erstelle eine Klasse, die Text zentriert. Das Tag <div> gibt deinem HTML-Dokument an, dass es einen bestimmten Bereich im Text referenzieren soll, daher wirst du eine Klasse für dieses Tag erstellen. Tippe das Folgende zwischen die "style" Tags ein und drücke nach der ersten Zeile zweimal auf ↵ Enter :
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/2974143-8.jpg\/v4-460px-2974143-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/2974143-8.jpg\/v4-728px-2974143-8.jpg","smallWidth":460,"smallHeight":349,"bigWidth":728,"bigHeight":553,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
     div 
 . 
 a 
 { 
 }
  • Füge die Eigenschaft text-align hinzu. Tippe text-align: center; zwischen die beiden geschweiften Klammern im div.a Bereich ein. Der Header sollte jetzt so aussehen:
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/2974143-9.jpg\/v4-460px-2974143-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/2974143-9.jpg\/v4-728px-2974143-9.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 >
  • Füge das richtige div Tag zu Text hinzu, der zentriert dargestellt werden soll. Bringe dafür das Tag <div class="a"> über dem gewünschten Text an und schließe es mit dem Tag </div> unter dem Text. Um bspw. eine Überschrift und den Text des zugehörigen Absatzes zu zentrieren, würdest du das Folgende eingeben:
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/2974143-11.jpg\/v4-460px-2974143-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/2974143-11.jpg\/v4-728px-2974143-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
     < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h1 
 > 
 Willkommen 
 auf 
 meiner 
 Webseite 
 </ 
 h1 
 > 
 < 
 p 
 > 
 Diese 
 Webseite 
 dient 
 vorrangig 
 der 
 Bereitstellung 
 von 
 Informationen 
 .</ 
 p 
 > 
 </ 
 div 
 >
  • Zentriere mit dem Tag div.a andere Bereiche. Um ein weiteres Element zu zentrieren, bspw. Content zwischen Tags wie <p></p> und <h2></h2> ), tippe <div class="a"> vor dem Eintrag und </div> danach ein. Da du "div.a" bereits als Befehl zum Zentrieren definiert hast, zentriert dies den Text wie eben bereits geschehen:
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/87\/2974143-12.jpg\/v4-460px-2974143-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/87\/2974143-12.jpg\/v4-728px-2974143-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
     < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h2 
 > 
 Spenden 
 willkommen 
 </ 
 h2 
 > 
 < 
 p 
 > 
 bitte 
 </ 
 p 
 > 
 </ 
 div 
 >
  • Sieh dir dein Dokument an. Auch wenn der Inhalt abweichen wird, sollte dein Dokument etwa so aussehen: [3]
    {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/2974143-13.jpg\/v4-460px-2974143-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/2974143-13.jpg\/v4-728px-2974143-13.jpg","smallWidth":460,"smallHeight":341,"bigWidth":728,"bigHeight":540,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 
     <! 
 DOCTYPE 
 html 
 > 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 style 
 > 
 div 
 . 
 a 
 { 
 text-align 
 : 
 center 
 ; 
 } 
 </ 
 style 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h1 
 > 
 Willkommen 
 auf 
 meiner 
 Webseite 
 </ 
 h1 
 > 
 < 
 p 
 > 
 Diese 
 Webseite 
 dient 
 vorrangig 
 der 
 Bereitstellung 
 von 
 Informationen 
 .</ 
 p 
 > 
 </ 
 div 
 > 
 < 
 div 
 class 
 = 
 "a" 
 > 
 < 
 h2 
 > 
 Spenden 
 willkommen 
 </ 
 h2 
 > 
 < 
 p 
 > 
 bitte 
 </ 
 p 
 > 
 </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    • Methode 2
    Methode 2 von 2:

    Mit dem center Tag in HTML

    PDF download PDF herunterladen
    1. 1
      Öffne dein HTML-Dokument. Diese Methode beschreibt, wie du das <center> Tag von HTML nutzt, das mittlerweile veraltet ist. Mit Stand von Dezember 2018 funktioniert es vielleicht in einigen Browsern zwar noch, es wird aber geraten, sich auf lange Sicht nicht auf dieses Tag zu verlassen.
    2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/2974143-2.jpg\/v4-460px-2974143-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/2974143-2.jpg\/v4-728px-2974143-2.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Scrolle nach unten, bis du die Überschrift, den Absatz oder anderen Text gefunden hast, die bzw. den du zentriert darstellen möchtest.
    3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/2974143-3.jpg\/v4-460px-2974143-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/2974143-3.jpg\/v4-728px-2974143-3.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Das center Tag hat das Format <center>text</center> , wobei "text" dein Text ist. Wenn dein Text Tags enthält, bspw. "<p></p>" für Absätze, können die "center" Tags aus den bestehenden Tags hinausgehen: 
       < 
 center 
 >< 
 h1 
 > 
Willkommen auf meiner Webseite </ 
 h1 
 ></ 
 center 
 > 
 < 
 center 
 > 
Mach es dir bequem! </ 
 center 
 >
    4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cb\/2974143-4.jpg\/v4-460px-2974143-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cb\/2974143-4.jpg\/v4-728px-2974143-4.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
      Dein Dokument sollte etwa so aussehen: [4] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 >< 
 center 
 > 
Willkommen auf meiner Webseite </ 
 center 
 ></ 
 h1 
 > 
 < 
 center 
 > 
Mach es dir bequem! </ 
 center 
 > 
 < 
 p1 
 > 
Der Zweck dieser Webseite ist die Darstellung von Informationen. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
      Werbeanzeige

    Verwandte wikiHows

    Kommentare in HTML Code einfügen
    Ein Hintergrund Bild in HTML einfügen
    HTM Dateien öffnen
    Einen E mail Link in HTML erstellen
    Eine einfache Webseite mit HTML gestalten
    HTML Dateien bearbeiten
    Die Farbe einer Schaltfläche in HTML ändern
    Bilder mit HTML einfügen
    Text in HTML blinken lassen
    Eine Webseite mit einfachem HTML hacken
    Ein Dropdown Menü mit HTML und CSS erstellen
    Einen Download Knopf auf einer Webseite erstellen
    Mit HTML innerhalb von einer Seite verlinken
    In HTML eine Linie einfügen
    Werbeanzeige

    Referenzen

    1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center
    2. ↑ https://www.w3schools.com/css/css_align.asp
    3. ↑ https://www.w3schools.com/cssref/pr_text_text-align.asp
    4. ↑ https://www.w3schools.com/tags/tag_center.asp

    Über dieses wikiHow

    In anderen Sprachen
    Diese Seite wurde bisher 207.223 mal abgerufen.

    War dieser Artikel hilfreich?

    Werbeanzeige