Cómo mostrar superíndice y subíndice de texto en CSS
En CSS, puede utilizar los valores de atributo sub, super o text-top, text-bottom del atributo de alineación vertical para mostrar el superíndice y el subíndice del texto. Ahora presentaremos el atributo css de alineación vertical y el método para mostrar el superíndice y el subíndice del texto. Espero que le resulte útil.
atributo css vertical-align
El atributo vertical-align se utiliza para establecer la alineación vertical de un elemento. Define la línea base de un elemento en línea en relación con la línea base del padre. elemento donde se encuentra el elemento. Alinear verticalmente. Vídeo tutorial recomendado: tutorial de CSS
El atributo de alineación vertical puede establecer la alineación del contenido de la celda en la tabla y es compatible con todos los navegadores.
Usar valores de atributo text-top y text-bottom
En el atributo de alineación vertical css, configurar el valor del atributo text-top puede alinear la parte superior del elemento en línea con la parte superior de la fuente de su elemento principal, Sin embargo, Alineación establece el valor del atributo text-bottom para alinear la parte inferior de un elemento en línea con la parte inferior de la fuente de su elemento principal.
Tomemos un ejemplo sencillo para ver cómo los valores de los atributos text-top y text-bottom establecen el superíndice y el subíndice del texto.
< p class ="super">Un fragmento de texto de prueba, con superíndice
Un fragmento de texto de prueba, con subscript span>
y luego establezca el tamaño de fuente del texto dentro de la etiqueta para que tenga un superíndice o subíndice.
Representación:
Usar valores de sub y superatributo
En el atributo de alineación vertical css, establecer el valor del superatributo puede hacer que el elemento en línea sea relativo al elemento El elemento principal flota una cierta distancia para formar un superíndice para el texto alineado verticalmente y establecer el valor del subatributo permite que el elemento en línea se hunda una cierta distancia en relación con el elemento principal donde se encuentra el elemento, formando un subíndice para el texto alineado verticalmente; texto.
Echemos un vistazo a los efectos específicos:
Un texto de prueba con superíndice
Un texto de prueba con subíndice
Representación:
El superíndice y el subíndice actuales tienen el mismo tamaño que el texto de su elemento principal, lo cual no es muy atractivo. Puede configurar el tamaño de fuente del superíndice y el subíndice en 12 píxeles para verlo. el efecto:
Resumen: