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

[fietur]

Hallo,

alle Jahre wieder ist eine Überarbeitung der eigenen Seite an der Reihe. Und dazu gehört dann u.a. der Check mit dem HTML-Validator. Und seit Jahren wird <center> angemeckert und vorgeschlagen, das über CSS zu erledigen. Verständlich, aber bisweilen umständlich. Denn .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:

.svg_symbol { width:1em; height:1em; background-repeat:no-repeat; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1em" viewBox="0 0 10 10" fill="%23ff0000"%3E%3Crect x="0" y="0" width="10" height="10"/%3E%3C/svg%3E'); }

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. Mit ausschließlich Text in der Zelle erscheint dieser korrekt mittig. 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.

Oder doch nicht - wie müsste denn <center> ersetzt werden?

Mit einem anderen Ansatz

<tr><td div class=center><svg width="1em" viewBox="0 0 10 10" fill="#ff0000"><rect x="0" y="0" width="10" height="10"/></svg></div></td></tr>

funktioniert zwar das Zentrieren. Aber: Hunderte von Symbolen in meiner Tabelle blähen das HTML unnötig auf. Und die Symbole sollten ja gerade raus aus dem HTML.

...und ups! HTML-konform soll kein <center> verwendet werden, aber dann wird das im CSS liegende Symbol nicht mittig. Und mit der CSS-Lösung .center funktioniert nur das HTML-SVG, nicht aber das "Trennung von Form und Inhalt"-konforme CSS-SVG.