Womit lässt sich <center> bei SVG-Grafiken ersetzen?

[Auge]

Hallo

.center {margin-left:auto; margin-right:auto; text-align:center;} ist leider nicht äquivalent zu <center>.

Konkret geht es bei mir um die Platzierung von einem oder mehreren Symbole in einer Tabellenzelle.

Die SVG-Symbole werden im CSS definiert:

Im HTML zeigt

<td><center><div class=svg_symbol></div></center></td>

das Symbol wie gewünscht mittig an. Mit der vorgeschlagenen Ersetzung

`<td class=center><div class=svg_symbol></div></td>`

erscheint das Symbol mitnichten mittig, sondern links ausgerichtet.

Um's mal ganz bös' zu sagen: warum sollte es auch?

Mit ausschließlich Text in der Zelle erscheint dieser korrekt mittig.

Klar.

Beim Mischen von Text und Symbol aber wird auch der Text linksbündig. Das verwundert mich gelinde gesagt etwas und unterscheidet die CSS-Lösung von <center> und macht sie so erstmal unbrauchbar.

Weil falsch angedacht und -gewendet.

Also, Text in einer Tabellenzelle, für die, wie du es mit der Klasse .center zeigst, text-align: center; definiert ist, wird zentriert dargestellt. Die Eigenschaften margin-left und margin-right haben für eine Tabellenzelle, auf die du das anwendest, jedoch keine Auswirkung.

Das gilt natürlich auch für das in der Tabellenzelle befindliche div, da es diese für die Zelle festgelegten Eigenschaften nicht erbt. Zudem wirkt sich text-align: center;, das tatsächlich vererbt wird, nicht wie gewünscht aus. Es zentriert zwar ein HTML-Element für ein Bild als Inhalt des divs in diesem div, das div selbst liegt aber linksbündig in der Zelle. Für ein per CSS eingefügtes Hintergrundbild gilt das gleich gar nicht, da dieses in seinem Element selbst per CSS zentriert werden muss (und das Element an sich in seinem Elternelement davon unabhängig ebenfalls).

Nun wäre zu klären, ob die Symbole zusätzlicher Zierrat zu einer sowieso schon bereitgestellten Information sind (Icon neben zugehörigem und erklärendem Text) oder selbst relevante Information bereitstellt. In ersterem Fall würde ich die Einbindung per CSS präferieren, im zweiten Fall gehören die Symbole ins HTML. Jenachdem, was nun zutrifft, unterscheidet sich auch das Set der benötigten CSS-Eigenschaften.

Was symbolisieren denn die Symbole in deiner Tabelle?

Und mit der CSS-Lösung .center funktioniert nur das HTML-SVG, nicht aber das "Trennung von Form und Inhalt"-konforme CSS-SVG.

Richtig angewendet ist das überhaupt kein Problem.

Tschö, Auge