Hilfe:Textgestaltung/Zentrieren

Diese Hilfeseite beschreibt Techniken zur horizontalen und vertikalen Zentrierung von Texten und Grafiken innerhalb anderer Strukturen der Seite.

Sinn und Zweck

Wie bei allen Veränderungen der Darstellung in einem Artikel wäre zu bedenken, dass die zusätzlichen Angaben die Verständlichkeit erhöhen oder das Layout wesentlich verbessern sollten. Rein persönliche Geschmacksfragen und individuelle Vorlieben verkomplizieren den Quelltext und verursachen Mehrarbeit für spätere Mitautoren. Übertriebene Ausschmückung liefe auch dem eher nüchternen enzyklopädischen Stil einer Wikipedia zuwider.

Eine wesentliche Verbesserung des Layouts, die über eine reine Dekoration hinausgeht, wäre die mittige Anordnung kurzer Elemente in breiten Tabellenzellen:

Modell	Eigenschaft1	Eigenschaft2	Eigenschaft3	Eigenschaft4
VarianteA	×	×	ja	ja
VarianteB	–	–	nein	nein

Blöcke

Der Text ist auf zwei Ebenen strukturiert:

• inline – die einzelnen Wörter im Fließtext, auch eine eingebettete Grafik.
• block – ein übergeordnetes Element; etwa ein Absatz, eine ganze Tabelle oder eine einzelne Tabellenzelle, oder verschiedene Elemente aus MediaWiki, wie beispielsweise eine Galerie.

Zentrierung kann sich immer nur auf ein Block-Element auswirken. Dieses wird in seinem übergeordneten Element mittig ausgerichtet. Bei horizontaler Zentrierung ist das im Zweifelsfall die ganze verfügbare Breite innerhalb des Wiki-Portalrahmens im momentanen Bildschirmfenster.

Um Fließtext herum wird automatisch ein Textblock generiert.

Jeder Block nimmt eine neue Zeile in Anspruch; es sei denn, er wäre als Tabellenzelle oder mit speziellen Mitteln neben anderen angeordnet.

Nachstehend werden Attribute angegeben, die einem bereits im Text vorhandenen Block-Element (nämlich der Tabellensyntax oder einem Tag) zugewiesen werden können; ausgenommen <center> als eigenständigem Element. Beim Attribut style= entstammt die Syntax der Sprache CSS; die Schlüsselwörter links vom Gleichheitszeichen gehören zur Sprache HTML. Mehrere Angaben können kombiniert werden.

Syntaxelemente für die horizontale Zentrierung

Standardmäßig sind alle Blöcke linksbündig ausgerichtet, mit folgenden Ausnahmen:

• Überschriften für ganze Tabellen – mittig (nach |+ am Zeilenanfang)
• Tabellenzelle als Überschrift – mittig (nach ! am Zeilenanfang)
• Miniaturbilder – rechtsbündig

class="center"

Diese Angabe bewirkt, dass das Block-Element selbst auf maximale Breite ausgedehnt und mittig ausgerichtet wird. Alle untergeordneten Text-Elemente werden mittig in ihrem jeweiligen Block-Element ausgerichtet.

Beispiel für einen inline-Text: <div class="center">Einzelne Wörter</div>

Einzelne Wörter

Beispiel für eine Tabelle mit {| class="wikitable center"

Breite Zelle	Breite Zelle
Zelle	Zelle

Relevanter Quellcode (CSS):

.center {
   width: 100%;
   text-align: center;
}
*.center * {
   margin-left: auto;
   margin-right: auto;
}

class="centered"

Diese Angabe bewirkt, dass ein Block-Element selbst mittig ausgerichtet wird. Auf die untergeordneten Elemente und einfachen Text hat dies keinen Einfluss.

Beispiel für einen inline-Text: <div class="centered">Einzelne Wörter</div>

Einzelne Wörter

Beispiel für eine Tabelle mit {| class="wikitable centered"

Breite Zelle	Breite Zelle
Zelle	Zelle

Relevanter Quellcode (CSS):

.centered {
   margin-left: auto;
   margin-right: auto;
}

style="text-align:center"

Diese Angabe bewirkt, dass die untergeordneten Text-Elemente mittig im übergeordneten Block-Element ausgerichtet werden. Auf Block-Elemente hat dies keinen Einfluss.

Beispiel für einen inline-Text: <div style="text-align:center">Einzelne Wörter</div>

Einzelne Wörter

Beispiel für eine Tabelle mit {| class="wikitable" style="text-align:center"

Breite Zelle	Breite Zelle
Zelle	Zelle

Medieneinbindung: zentriert

Mit dem Bildparameter zentriert oder auch center wird das Bild in der Mitte ausgerichtet:

[[Datei:Nuvola apps khelpcenter green.png|80px|mini|zentriert|Hilfe!]]

Hilfe!

Bei einer solchen Medieneinbindung entspricht das class="centered" – das Bild wird in der Mitte des übergeordneten Block-Elements ausgerichtet; auf anderes wie den Legendentext hat das keinen Einfluss.

<center>

Dieses Element ist mit HTML5 als „veraltet“ erklärt worden. Das bedeutet, dass neue Verwendungen möglichst eingeschränkt werden sollten; bisherige Nutzungen sollten im Rahmen sonstiger Überarbeitungen durch andere Lösungen ersetzt werden, wo geeignete Elemente vorhanden sind. Wegen seiner Kürze war dieses Element jedoch sehr beliebt.

Diese Angabe bewirkt, dass ein Block-Element um einen freien Text gebildet und das Element selbst mittig ausgerichtet wird. Auf die untergeordneten Elemente hat dies keinen Einfluss.

Beispiel für einen inline-Text: <center>Einzelne Wörter</center>
Ersatz dafür: <div class="center">Einzelne Wörter</div>

Einzelne Wörter

Beispiel für eine Tabelle:

<center>
{| class="wikitable"
|-
…
|}
</center>

Ersatz dafür: {| class="wikitable centered"

Andere Block-Elemente wie etwa Galerien wären analog mit class="centered" auszustatten.

Seit Ende Mai 2022 gibt es in Artikeln der deutschsprachigen Wikipedia dieses Element nicht mehr.

align="center"

Dieses HTML-Attribut war bereits 1998 als „veraltet“ erklärt worden. Generell gehen diese Attribute im universellen style-Attribut auf. Das kommt auch den Wiki-Autoren zugute, denn umso weniger Namen von Attributen müssen gelernt werden. Allerdings ist der Ausdruck style="text-align:center" etwas länger.

Diese Angabe bewirkt, dass das Element selbst mittig ausgerichtet wird, und zwar sowohl ein enthaltenes Text- als auch ein Block-Element. Auf die untergeordneten Elemente hat dies keinen Einfluss. Die Wirkung ist komplex; eine gleichzeitige Angabe von class="wikitable" verhindert die Wirkung auf eine ganze Tabelle, nicht aber explizit bei separaten Angaben für einzelne Tabellenzeilen oder Tabellenzellen.

Beispiel für einen inline-Text: <div align="center">Einzelne Wörter</div>

Einzelne Wörter

Beispiel für eine Tabelle mit {| align="center"

Breite Zelle	Breite Zelle
Zelle	Zelle

Beispiel für eine Tabelle mit {| class="wikitable" align="center"

Breite Zelle	Breite Zelle
Zelle	Zelle

Vorlage:center

Die Vorlage:Center oder synonym Vorlage:Zentrieren richtet den übergebenen Wikitext sowie mögliche untergeordnete Elemente aus und bildet dazu einen Block. Bei mit class="wikitable" vereinbarten Tabellen bleibt die Gesamt-Tabelle linksbündig ausgerichtet.

{{Zentrieren|1=}}

Beim Parameter 1 muss beachtet werden, dass der Text keine Pipe-Symbole enthalten darf, und um im Text den Gebrauch von Gleichheitszeichen zu ermöglichen, sollte der Parameter immer mit vorangestelltem 1= angegeben werden.

Beispiel mit {{center|1=Beispieltext}}

Beispieltext

Relevanter Quellcode:

<div class="center centered" style="width:auto;">

Dies nutzt von oben die Klassen center und centered mit entsprechender Wirkung.

Vertikale Zentrierung

Für eine vertikale Zentrierung muss es einen umgebenden Block geben mit einer Höhe, die größer ist als das auszurichtende Element.

Im Fließtext wird der Text fortlaufend oben an der Schreibfläche angeordnet; damit ist der den Text umgebende Block immer genauso hoch wie der Text und eine vertikale Zentrierung ist darin nicht möglich.

Angewendet werden kann dies wie bei der horizontalen Zentrierung nur auf Blöcke.

• In Tabellen sind die Inhalte standardmäßig vertikal zentriert, sofern nicht class="toptextcells" angegeben wurde.

Die Anweisung dafür lautet:

• style="vertical-align:middle"
• valign="middle" (veraltet [seit 1998])