sub align nur Text unter einem Element

Question

Wenn ich versuche, ein Zeichen c als Sub-Aligned zu erstellen, wird der folgende bar Text in der Tabellenzeile auch sub-ausgerichtet (sehr eingängig).

<table> 
    <tr> 
    <td>test</td> 
    <td>foo<sel style="vertical-align: sub">c</sel></td> 
    <td>bar</td> 
    </tr> 
</table> 

Kann jemand darauf hinweisen, was ich falsch mache oder wie das zu beheben ist. Hier

ist die Geige: https://jsfiddle.net/aaL06scu/

Answer 1

verwenden:

td { 
 
    vertical-align:baseline; 
 
} 
 
sel { 
 
    vertical-align:sub; 
 
}

<table> \t 
 
    <tr> 
 
    <td>test</td> 
 
    <td>foo<sel>c</sel></td> 
 
    <td>bar</td> 
 
    </tr> 
 
</table>

Von der offiziellen CSS-Spezifikation:

Senken Sie die Basislinie der Box an die richtige Position für die Unterschriften der Box der Eltern.
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Erklärung (Warum dies geschieht):
Die <tbody>vertical-align:middle; verwendet. Diese Regel zentriert den gesamten Inhalt von <tbody> vertikal. Das Element <td> erbt diese Regel. Und Sie können sehen, dass der gesamte Inhalt (mit Index) in der Mitte ist. Der ganze Inhalt mit Index ist etwas höher als ohne den Index und der mittlere ist nicht in der Mitte der Buchstaben, weil der Index die Höhe des ganzen Textes erweitert. Wenn Sie die Buchstaben auf eine Zeile setzen möchten, müssen Sie vertical-align an die Grundlinie. Die Grundlinie ist die Position oder Linie, wo die Buchstaben platziert werden. Wenn Sie dies für alle Inhalte einer Zeile tun, sollte der Text (nicht in tiefgestellten Buchstaben) in einer Zeile stehen (siehe Beispiel).

Answer 2

Verwenden <sub>-Tag statt

<table> 
 
    <tr> 
 
    <td>test</td> 
 
    <td>foo<sub>c</sub></td> 
 
    <td>bar</td> 
 
    </tr> 
 
</table>

Ausgang: Test foo _c bar

Weitere Referenz auf <sub> Scheck http://www.w3schools.com/tags/tag_sub.asp