Benutzer:Wikisteno/Testseite
| Beispielsatz | Zeichen | Bedeutung | Erläuterung |
|---|---|---|---|
| |||
| Hallo | Hallo | Beispiel5 | |
| Hallo | Hallo | Beispiel8 | |
| Hallo | Hallo | Beispiel8 |
GrundlinieGrundlinie
GrundlinieGrundlinie
A
A
A
A
A
A
A
A
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>