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