Zentrierung von HTML-Elementen

[Gaby]

Guten Tag!

Ist folgendes korrekt für die Zentrierung von Text und Tabelle?

CSS

.mittig
{
    margin-left: auto;
    margin-right: auto;
}
.zentriert
{
    text-align: center;
}

HTML

<p class="zentriert">Diese Webseite ....<br>
  ..........
</p>

<table class="mittig">
  <tr>
    <td>...........................</td>
                           ......
    <td>...........................</td>
  </tr>
</table>

[Gunnar Bittersmann]

@@Gaby

Ist folgendes korrekt für die Zentrierung von Text und Tabelle?

Ja.

Die Frage ist, ob es sinnvoll ist, Text zu zentrieren, weil schlechter lesbar. Aber für gewisse kurze Texte ist Zentrierung auch OK.

🖖 Live long and prosper

[Der Martin]

Hallo,

Ist folgendes korrekt für die Zentrierung von Text und Tabelle?

CSS

.mittig
{
    margin-left: auto;
    margin-right: auto;
}
.zentriert
{
    text-align: center;
}

auf den ersten Blick denke ich, das ist korrekt so. Inline-Elemente (also Text und Elemente, die wie Text behandelt werden, z.B. Bilder) zentriert man mit text-align. Für Block-Elemente (dazu zählen im weiteren Sinn auch Tabellen) ist margin:auto eine gängige Methode.

Mein Problem sind noch deine Bezeichnungen. Denn für mich ist "mittig" und "zentriert" eigentlich dasselbe. Akute Verwechslungsgefahr!

Einen schönen Tag noch
 Martin

[Gaby]

Hi,

Mein Problem sind noch deine Bezeichnungen. Denn für mich ist "mittig" und "zentriert" eigentlich dasselbe. Akute Verwechslungsgefahr!

Ja aber dahinter stecken ja unterschiedliche Dinge. Ich kann also nicht für <p> und <table> dasselbe angeben.

Würdest Du dann so etwas vorschlagen wie p-zentriert und tab-zentriert?

[MrMurphy]

Die Frage lässt sich ohne konkretes Beispiel nicht beantworten.

Beispiel Absatz (p-Element):

Zum einen kann der Text des Absatzes zentriert werden. Das sollte aber nur für (sehr) kurze Texte erfolgen, da längere Texte so schwerer lesbar sind.

Alternativ kann auch der Absatz schmaler gemacht werden, der Text aber linksbündig bleiben. Das bietet sich bei mehrzeiligen Texten an. Die bleiben dann leicht lesbar, der Absatz fällt aber trotzdem auf.

Hinweis: Anfänger wollen sehr viel zentrieren. In der Praxis ist das aber meist unsinnig. Im Zweifel also die Finger davon lassen.

[Rolf B]

Hallo Gaby,

Ja aber dahinter stecken ja unterschiedliche Dinge. Ich kann also nicht für <p> und <table> dasselbe angeben.

Naja, theoretisch kannst Du das schon. Unser Wiki hat umfangreiche Infos zum Thema Selektoren.

Du kannst in einer CSS Regel

• Elemente mit einem bestimmten Elementtyp selektieren (p, table)
• Elemente mit einer bestimmten Klasse selektieren (.zentriert, .mittig)
• Und auch beides kombinieren

p.zentriert {
   text-align:center;
}

table.zentriert {
   margin-inline: auto;
}

margin-inline fasst margin-left und margin-right zusammen.

Wichtig ist, dass zwischen Elementtyp und Klassenselektor keine Leerstelle steht. Eine Leerstelle hat in CSS eine spezielle Bedeutung, siehe dazu „Nachfahrenselektor“ im Wiki.

Ich habe das jetzt aber rot markiert, für „schlecht“. Warum?

• Durch p.zentriert wird nicht das Element zentriert, sondern sein Inhalt. Das Element füllt nach wie vor die verfügbare Breite.
• Durch table.zentriert wird die Table selbst zentriert. Der Inhalt der Tabelle wird nicht beeinflusst.

Deswegen halte ich die gleiche Benennung der Klasse zumindest für schwierig. Die Semantik ist verschieden.

Es gibt übrigens noch eine dritte Zentriermöglichkeit, die analog zu text-align „von außen auf den Inhalt“ wirkt:

.block-zentriert {
   justify-items: center;
}

Diese Eigenschaft wirkt auf die Kindelemente des Elementes mit der Eigenschaft. Sie wirkt auch etwas unterschiedlich, je nach dem, ob das .block-zentriert Element ein Grid-Container ist oder ein normales Blockelement.

Bei einem <div class="block-zentriert"> werden die darin enthaltenen Blockelemente zentriert, also beispielsweise auch eine Tabelle. Fließtext hingegen wird von justify-items nicht beeinflusst.

Rolf

[Ryuno-Ki]

Moin Rolf,

Es gibt übrigens noch eine dritte Zentriermöglichkeit, die analog zu text-align „von außen auf den Inhalt“ wirkt:

.block-zentriert {
   justify-items: center;
}

Diese Eigenschaft wirkt auf die Kindelemente des Elementes mit der Eigenschaft. Sie wirkt auch etwas unterschiedlich, je nach dem, ob das .block-zentriert Element ein Grid-Container ist oder ein normales Blockelement.

Ich hätte jetzt auch mit einem Div-Wrapper und display:grid;place-items:center; horizontal und vertikal zentriert.

Können wir eigentlich auch so Leitfäden wie https://css-tricks.com/centering-css-complete-guide/ in das Wiki übernehmen?

Gruß,

[Matthias Scharwies]

Hallo zusammen,

Können wir eigentlich auch so Leitfäden wie https://css-tricks.com/centering-css-complete-guide/ in das Wiki übernehmen?

Dein Wunsch ist mir Befehl:

• CSS/Tutorials/Ausrichtung/Inhalte zentrieren

Herzliche Grüße
Matthias Scharwies

[Ryuno-Ki]

Moin Matthias,

Hallo zusammen,

Können wir eigentlich auch so Leitfäden wie https://css-tricks.com/centering-css-complete-guide/ in das Wiki übernehmen?

Dein Wunsch ist mir Befehl:

• CSS/Tutorials/Ausrichtung/Inhalte zentrieren

Purrfect!

Gruß,

[Gaby]

• CSS/Tutorials/Ausrichtung/Inhalte zentrieren

Dort steht <div id="zentriert">.

Wo wird in CSS #zentriert definiert?

[Matthias Scharwies]

Servus!

• CSS/Tutorials/Ausrichtung/Inhalte zentrieren

Dort steht <div id="zentriert">.

Wo wird in CSS #zentriert definiert?

Im Stylesheet oder im style-Element:

#zentriert {
  margin-left: auto;
  margin-right: auto;
}

Die Raute # spricht ein Element mit einer einmalig vergebenen id an;

der Punkt . Klassen, die auf einer Seite mehrfach vorkommen dürfen.

Siehe auch:

• CSS/Tutorials/Selektoren

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

#zentriert {
  margin-left: auto;
  margin-right: auto;
}

Nein. DRY.

margin-inline: auto. Hatte @Rolf B doch schon gesagt.

🖖 Live long and prosper

[Matthias Scharwies]

Hallo Gaby,

die id zentriert fand sich zwar im HTMl, die Zentrierung wurde aber - wie im Artikel beschrieben - durch

.inhalte-werden-zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

festgelegt.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Ryuno-Ki,

Ich hätte jetzt auch mit einem Div-Wrapper und display:grid;place-items:center; horizontal und vertikal zentriert.

Der Vorteil von display:grid; ist, dass Du die Zentrierung einheitlich über *-items hinbekommst. Ob es ein Nachteil ist, für ein div ein 1×1 Grid einzurichten, weiß ich nicht. Ich persönlich würde glauben, dass das Umschalten auf ein spezielles Layoutmodell nicht ganz billig ist.

Es geht aber auch ohne Grid - du kannst für ein div align-content: center; und justify-items: center; setzen und dann wird dessen Inhalt auch zentriert. CSS Box Alignment Level 3 hat einige interessante Funktionen gebracht.

Rolf

[Robert B.]

Moin Gaby,

Ist folgendes korrekt für die Zentrierung von Text und Tabelle?

.mittig
{
    margin-left: auto;
    margin-right: auto;
}
.zentriert
{
    text-align: center;
}

für das horizontale Zentrieren ja. Du könntest mit CSS auch vertikal zentrieren, falls gewünscht.

Viele Grüße
Robert