Quelltext der Seite Hilfe:Textgestaltung/Zentrieren

{{Hilfe}}
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:
{| class="wikitable"
|-
| Modell
! Eigenschaft1
! Eigenschaft2
! Eigenschaft3
! Eigenschaft4
|-
| '''VarianteA''' ||style="text-align:center"| × || × ||style="text-align:center"| ja || ja
|-
| '''VarianteB''' ||style="text-align:center"| – || – ||style="text-align:center"| nein || nein
|}

== {{Anker|block-inline|inline-block}} Blöcke ==
Der Text ist auf zwei Ebenen strukturiert:
* {{Anker|inline}} ''inline'' – die einzelnen Wörter im [[Fließtext]], auch eine eingebettete Grafik.
* {{Anker|block}} ''block'' – ein übergeordnetes Element; etwa ein [[Absatz (Text)|Absatz]], eine ganze Tabelle oder eine einzelne Tabellenzelle, oder verschiedene Elemente aus [[MediaWiki]], wie beispielsweise eine [[Hilfe:Galerie|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.<ref>Auf der obersten Ebene des Seiteninhalts (Wikitext) wird freier Text in einen Absatz <code>&lt;p></code> eingeschlossen; ansonsten greift das Prinzip „Run-In“.</ref>

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 [[Hilfe:Tags|Tag]]) zugewiesen werden können; ausgenommen <code>[[#tag-center|&lt;center>]]</code> als eigenständigem Element. Beim Attribut <code>style=</code> entstammt die Syntax der Sprache [[Hilfe:CSS|CSS]]; die Schlüsselwörter links vom Gleichheitszeichen gehören zur Sprache [[Hypertext Markup Language|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 <code>|+</code> am Zeilenanfang)
* Tabellenzelle als Überschrift – mittig (nach <code>!</code> am Zeilenanfang)
* Miniaturbilder – rechtsbündig

=== {{Anker|class-center}} class="center" ===
Diese Angabe bewirkt, dass das [[#block|Block]]-Element selbst auf maximale Breite ausgedehnt und mittig ausgerichtet wird. Alle untergeordneten [[#inline|Text-Elemente]] werden mittig in ihrem jeweiligen Block-Element ausgerichtet.

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

Beispiel für eine Tabelle mit <code style="white-space: nowrap">{| class="wikitable center"</code>
{| class="wikitable center"
|-
| Breite&nbsp;Zelle
| Breite&nbsp;Zelle
|-
| Zelle
| Zelle
|}

Relevanter Quellcode (CSS):<ref>Definiert weltweit durch {{Phab|file=resources/src/mediawiki.skinning/elements.css|title=mediawiki.skinning/elements.css}}.</ref>
<syntaxhighlight lang="css">
.center {
   width: 100%;
   text-align: center;
}
*.center * {
   margin-left: auto;
   margin-right: auto;
}
</syntaxhighlight>

=== {{Anker|class-centered}} 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: <code>&lt;div class="centered">Einzelne Wörter&lt;/div></code>
<div class="centered">Einzelne Wörter</div>

Beispiel für eine Tabelle mit <code style="white-space: nowrap">{| class="wikitable centered"</code>
{| class="wikitable centered"
|-
| Breite&nbsp;Zelle
| Breite&nbsp;Zelle
|-
| Zelle
| Zelle
|}

Relevanter Quellcode (CSS):<ref>Definiert in der deutschsprachigen Wikipedia durch [[MediaWiki:Common.css]].</ref>
<syntaxhighlight lang="css">
.centered {
   margin-left: auto;
   margin-right: auto;
}
</syntaxhighlight>

=== {{Anker|style-text-align:center}} style="text-align:center" ===
Diese Angabe bewirkt, dass die untergeordneten [[#inline|Text-Elemente]] mittig im übergeordneten Block-Element ausgerichtet werden. Auf Block-Elemente hat dies keinen Einfluss.

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

Beispiel für eine Tabelle mit <code style="white-space: nowrap">{| class="wikitable" style="text-align:center"</code>
{| class="wikitable" style="text-align:center"
|-
| Breite&nbsp;Zelle
| Breite&nbsp;Zelle
|-
| Zelle
| Zelle
|}

=== {{Anker|file}} Medieneinbindung: zentriert ===
Mit dem [[Hilfe:Bilder#Ausrichten im Text|Bildparameter]] <code>zentriert</code> oder auch <code>center</code> wird das Bild in der Mitte ausgerichtet:

<code><nowiki>[[Datei:Nuvola apps khelpcenter green.png|80px|mini|zentriert|Hilfe!]]</nowiki></code>
[[Datei:Nuvola apps khelpcenter green.png|80px|mini|zentriert|Hilfe!]]
Bei einer solchen [[Hilfe:Medieneinbindung|Medieneinbindung]] entspricht das <code>class="centered"</code>&nbsp;– das Bild wird in der Mitte des übergeordneten Block-Elements ausgerichtet; auf anderes wie den Legendentext hat das keinen Einfluss.

=== {{Anker|tag-center}} &lt;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|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: <code style="white-space:nowrap">&lt;center>Einzelne Wörter&lt;/center></code><br />
Ersatz dafür: <code style="white-space:nowrap">&lt;div class="center">Einzelne Wörter&lt;/div></code>
<div class="center">Einzelne Wörter</div>

Beispiel für eine Tabelle: 
<pre>
<center>
{| class="wikitable"
|-
…
|}
</center>
</pre>
Ersatz dafür: <code style="white-space:nowrap">{| class="wikitable [[#class-centered|centered]]"</code>

Andere Block-Elemente wie etwa [[Hilfe:Galerie|Galerien]] wären analog mit <code>class="centered"</code> auszustatten.

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

=== {{Anker|align-center}} align="center" ===
{{Anker|deprecated-1998}} Dieses HTML-Attribut war bereits 1998 als „veraltet“ erklärt worden. Generell gehen diese Attribute im universellen <code>[[#style-text-align:center|style]]</code>-Attribut auf. Das kommt auch den Wiki-Autoren zugute, denn umso weniger Namen von Attributen müssen gelernt werden. Allerdings ist der Ausdruck <code style="white-space: nowrap">style="text-align:center"</code> etwas länger.

Diese Angabe bewirkt, dass das Element selbst mittig ausgerichtet wird, und zwar sowohl ein enthaltenes [[#inline|Text-]] als auch ein [[#block|Block]]-Element. Auf die untergeordneten Elemente hat dies keinen Einfluss. Die Wirkung ist komplex; eine gleichzeitige Angabe von <code style="white-space: nowrap">class="wikitable"</code> 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: <code>&lt;div align="center">Einzelne Wörter&lt;/div></code>
<div align="center">Einzelne Wörter</div>

Beispiel für eine Tabelle mit <code style="white-space: nowrap">{| align="center"</code>
{| align="center"
|-
| Breite&nbsp;Zelle
| Breite&nbsp;Zelle
|-
| Zelle
| Zelle
|}

Beispiel für eine Tabelle mit <code style="white-space: nowrap">{| class="wikitable" align="center"</code>
{| class="wikitable" align="center"
|-
| Breite&nbsp;Zelle
| Breite&nbsp;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|Block]]. Bei mit <code style="white-space: nowrap">class="wikitable"</code> vereinbarten Tabellen bleibt die Gesamt-Tabelle linksbündig ausgerichtet.

<code><nowiki>{{Zentrieren|1=}}</nowiki></code>

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 <code>1=</code> angegeben werden.

Beispiel mit <code><nowiki>{{center|1=Beispieltext}}</nowiki></code>
{{center|1=Beispieltext}}

Relevanter Quellcode:
<syntaxhighlight lang="html4strict">
<div class="center centered" style="width:auto;">
</syntaxhighlight>
Dies nutzt von oben die Klassen <code>[[#class-center|center]]</code> und <code>[[#class-centered|centered]]</code> 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 <code>[[Hilfe:Tabellen#toptextcells|class="toptextcells"]]</code> angegeben wurde.
Die Anweisung dafür lautet:
* <code>style="vertical-align:middle"</code>
* <code>valign="middle"</code> (veraltet &#91;[[#deprecated-1998|seit 1998]]])

== Anmerkungen ==
<references />

[[Kategorie:Hilfe:Formatieren|Zentrieren]]