CSS: alineación vertical

Descripción

La propiedad de alineación vertical determina la alineación del texto dentro de una línea o dentro de una celda de la tabla.

Valores posibles

baseline - La línea de base del elemento está alineada con la línea de base del elemento principal.
sub - La línea de base del elemento se reduce al punto apropiado para el texto subindicado.
super - La línea de base del elemento se eleva al punto apropiado para el texto en superíndice.
top - La parte superior del cuadro del elemento está alineada con la parte superior del cuadro de línea, en el contexto del contenido en línea, o con la parte superior de la celda de la tabla en el contexto de las tablas.
text-top - La parte superior de la caja del elemento está alineada con la parte superior de la caja en línea más alta de la línea.
middle - La línea de base del elemento se alinea con el punto definido por la línea de base del elemento principal más la mitad de la altura x de la fuente del elemento principal, en el contexto del contenido en línea.
bottom - La parte inferior del cuadro del elemento está alineada con la parte inferior del cuadro de línea, en el contexto del contenido en línea, o con la parte inferior de la celda de la tabla en el contexto de las tablas.
text-bottom - La parte inferior del cuadro del elemento se alinea con la parte inferior del cuadro en línea más bajo de la línea.
percentage - La línea de base del elemento aumenta o disminuye según el porcentaje dado del valor de la altura de la línea de propiedad.
length- La línea base del elemento aumenta o disminuye según el valor de longitud dado. Se permiten valores de longitud negativos para esta propiedad. Un valor de longitud de 0 para esta propiedad tiene el mismo efecto que la línea de base del valor.

Se aplica a

elementos de nivel en línea y elementos con una visualización de celda de tabla.

Sintaxis DOM

object.style.verticalAlign = "baseline";

Ejemplo

Aquí está el ejemplo:

<html>
   <head>
   </head>

   <body>
      <table style = "height:200px; width:400px;border:1px solid red;">
         <tr>
            <td style = "vertical-align:bottom;" >
               <p>This will be aligned to bottom of the cell.</p>
            </td>
         </tr>
      </table>
   </body>
</html>

Esto producirá el siguiente resultado:

↰ Previous page