CSS Alineación Vertical

Cómo crear un texto base o texto poderoso?
Cómo crear un texto super o sobrelineado?

Explicación


Propiedad :

Alineación vertical
Uso:
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: 50%;
vertical-align: pt | px | cm;

Definición:
Usando este atributo podemos decorar nuestro texto. Para crear texto base y poderoso.
Toma los valores siguientes.
a)baseline : El texto se mostrará de forma normal.
b)sub : Este texto se mostrará como un subtexto. Quedará colocado abajo/debajo de un texto normal.
c)super : Este texto se mostrará como un super texto. Quedará colocado por encima de un nivel de texto normal.
d)% : Este valor se puede establecer en porcentaje como 50%, etc...
e)pt | px | cm : El valor puede establecerse en puntos, píxeles o cm.

Ejemplo 1:


El siguiente es un <font style="vertical-align: baseline;"> Texto En línea </font> de Ejemplo.

Resulta:


El siguiente es un Texto En línea de Ejemplo.

Ejemplo 2:


El siguiente es un <font style="vertical-align: sub;"> Texto Sublineado </font> de Ejemplo.

Resulta:


El siguiente es un Texto Sublineado de Ejemplo.

Ejemplo 3:


El siguiente es un <font style="vertical-align: super;"> Texto Superlineado </font> de Ejemplo.

Resulta:


El siguiente es un Texto Superlineado de Ejemplo.

Ejemplo 4:


El siguiente es un <font style="vertical-align: -10px;"> Pixel </font> de Ejemplo.

Resulta:


El siguiente es un Pixel de Ejemplo.

Nota: Para obtener texto sublineado tenemos que establecer los valores en negativo. Esta regla es la misma para %, puntos y cm. En el ejemplo de arriba también podemos usar pt(puntos) o cm (centímetros) o % (porcentaje).