Beispielsatz Zeichen Bedeutung Erläuterung

Hallo Hallo Beispiel5
Hallo Hallo Beispiel8
Hallo Hallo Beispiel8

GrundlinieGrundlinie

GrundlinieGrundlinie

a)
A
b)
A
c)
A
d)
A
e)
A
f)
A
g)
A
h)
A
i)
A


<div style="float:left;text-align:center"><div style="float:left;white-space:nowrap"><span style="vertical-align:15px">a)</span>[[Datei:Sütterlin letter A.png|baseline]]<br />A</div><div style="float:left;margin-left:-50px">[[Datei:Sütterlin letter B.png|50px]]</div></div>

Problem: Hierbei erscheint die Übersetzung nicht zentriert unter der Grafik, sondern zentriert unter Buchstabe und Grafik zusammen.

(Umständliche) Lösung:

<span style="display:inline-table"><span style="display:table-row"><span style="display:table-cell"><span style="vertical-align:15px">Grundlinie</span></span><span style="display:table-cell">[[Datei:Sütterlin letter A.png|baseline]]</span></span><span style="display:table-row"><span style="display:table-cell">A</span><span style="display:table-cell;text-align:center">B</span></span></span>Hier ginge ein Text weiter

Ergibt

GrundlinieABHier ginge ein Text weiter

Einfachere Lösung:

<span style="display:inline-table"><span style="display:table-row"><span style="display:table-cell"><span style="vertical-align:15px">Grundlinie</span></span><span style="display:table-cell;text-align:center">[[Datei:Sütterlin letter A.png|baseline]]<br />B</span></span></span>

Ergibt

Grundlinie
B

Für die horizontale Ausrichtung muss man padding verwenden:

Grundlinie
B



A

B

C

D

B

B

B

B

B

B

B

B


<div style="float:left;text-align:center"><div style="float:left">[[Datei:Vai-mbee-C.svg]]<br />A</div><div style="float:left;margin-left:-90px;padding-top:20px">[[Datei:Vai-mbee-C.svg|80px]]</div></div>

<div style="float:left;text-align:center"><div style="float:left">[[Datei:Vai-mbee-C.svg]]<br />B</div><div style="float:left;margin-left:-120px;padding-top:20px">[[Datei:Vai-mbee-C.svg|80px]]</div><div style="float:left;margin-left:-90px;padding-top:20px">[[Datei:Vai-mbee-C.svg|80px]]</div></div>

<div style="float:left;text-align:center;margin-top:40px"><div style="float:left">[[Datei:Sütterlin letter A.png]]<br />C</div><div style="float:left;margin-left:-80px;padding-top:10px">[[Datei:Vai-mbee-C.svg|40px]]</div></div>

<div style="float:left;text-align:center;padding-top:20px"><div style="float:left">[[Datei:Sütterlin letter A.png]]<br />D</div><div style="float:left;margin-left:-80px;padding-top:10px">[[Datei:Vai-mbee-C.svg|40px]]</div></div>

<div style="float:left;text-align:center"><div style="float:left">[[Datei:Sütterlin letter A.png]]<br />B</div><div style="float:left;margin-left:-80px;padding-top:10px">[[Datei:Vai-mbee-C.svg|40px]]</div></div>