सब एक तत्व के नीचे केवल पाठ को संरेखित करें

Question

जब मैं एक वर्णको उप-गठबंधन के रूप में बनाने का प्रयास करता हूं, तो तालिका पंक्ति में bar टेक्स्ट को उप-गठबंधन (बहुत ही अनियमित) भी मिलता है।

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

कोई बता सकता है कि मैं क्या गलत कर रहा हूं या इसे कैसे ठीक कर सकता हूं। https://jsfiddle.net/aaL06scu/

Answer 1

उपयोग इस:

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>

आधिकारिक सीएसएस विनिर्देश से:

लोअर आधारभूत

यहाँ बेला है माता-पिता के बॉक्स की सदस्यता के लिए उचित स्थिति में बॉक्स का।
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

स्पष्टीकरण (ऐसा क्यों होता है):
<tbody>vertical-align:middle; उपयोग कर रहा है। ये नियम लंबवत केंद्र <tbody> की पूरी सामग्री केंद्र। <td> तत्व इस नियम का उत्तराधिकारी है। और आप पूरी सामग्री (सबस्क्रिप्ट के साथ) मध्य में देख सकते हैं। सबस्क्रिप्ट के साथ पूरी सामग्री सबस्क्रिप्ट के बिना थोड़ी अधिक है और मध्य अक्षरों के बीच नहीं है, क्योंकि सबस्क्रिप्ट पूरे पाठ की ऊंचाई बढ़ाती है। यदि आप अक्षरों को एक पंक्ति में सेट करना चाहते हैं तो आपको बेसलाइन पर vertical-align पर जाना होगा। आधार रेखा वह स्थिति या रेखा है जहां अक्षरों को रखा जाएगा। यदि आप पंक्ति की सभी सामग्री पर ऐसा करते हैं तो टेक्स्ट (सबस्क्रिप्ट में नहीं) एक पंक्ति पर होना चाहिए (उदाहरण देखें)।

Answer 2

उपयोग <sub> टैग, इसके बजाय

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

आउटपुट: परीक्षण foo _ग बार

<sub> जांच http://www.w3schools.com/tags/tag_sub.asp

के बारे में अधिक जानकारी के लिए