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 verticalUso:
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).