Text in HTML zentrieren

unter Mitarbeit von wikiHow Staff

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] X Forschungsquelle}

Methode 1

Methode 1 von 2:

Mit CSS

PDF herunterladen

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] X Forschungsquelle}

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:

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:

<!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:

<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:

<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] X Forschungsquelle}

<!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 herunterladen

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.
Scrolle nach unten, bis du die Überschrift, den Absatz oder anderen Text gefunden hast, die bzw. den du zentriert darstellen möchtest.
3
Füge das "center" Tag zu beiden Seiten des Texts ein. 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
Sieh dir dein HTML-Dokument an. Dein Dokument sollte etwa so aussehen:^{[4] X Forschungsquelle}
```
<!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