logo

Superíndex i subíndex CSS

En HTML, hi ha l'ús de i etiquetes per definir el text de subíndex i superíndex. El text en superíndex apareix amb una font més petita i el mig caràcter per sobre de la línia normal. Generalment s'utilitza per escriure equacions matemàtiques (com ara x2+ i2= r2 ), notes a peu de pàgina i molts més.

A diferència del superíndex, el text del subíndex apareix amb una font més petita i el mig caràcter per sota de la línia normal. Generalment s'utilitza per escriure equacions químiques o fórmules químiques com ara H2O, H2TAN4, etc.

En CSS, el alineació vertical la propietat s'utilitza per aconseguir el mateix. També podem especificar el superíndex i el subíndex del text mitjançant CSS. Aquesta propietat CSS especifica l'alineació vertical del text.

Ara, anem a veure com aconseguir el superíndex i el subíndex utilitzant el alineació vertical propietat.

Sintaxi

 vertical-align: baseline | super | sub ; 

Valors de propietat

línia de base: És el valor predeterminat que alinea el text amb la línia base de l'element pare.

super: És el superíndex que puja el text.

sub: És el subíndex que rebaixa el text.

Quan els valors súper i sub d'aquesta propietat s'apliquen, aleshores el text es converteix en superíndex o subíndex.

Exemple: superíndex

 #super{ vertical-align:super; font-size: medium; } p{ font-weight: bold; font-size: 20px; } <p> Its common examples are chemical equations. </p> <h3> Chemical formula of Water is: H<span id="sub">2</span>O</h3> <h3> Ch emical formula of Sulphuric acid is: H<span id="sub">2</span>SO<span id="sub">4</span></h3> 
Prova-ho ara