CSS - alinhamento vertical

Descrição

A propriedade de alinhamento vertical determina o alinhamento do texto em uma linha ou em uma célula da tabela.

Valores possíveis

baseline - A linha de base do elemento é alinhada com a linha de base do elemento pai.
sub - A linha de base do elemento é reduzida para o ponto apropriado para texto subscrito.
super - A linha de base do elemento é elevada até o ponto apropriado para texto sobrescrito.
top - A parte superior da caixa do elemento é alinhada com a parte superior da caixa de linha, no contexto do conteúdo embutido, ou com a parte superior da célula da tabela no contexto das tabelas.
text-top - A parte superior da caixa do elemento é alinhada com a parte superior da caixa embutida mais alta da linha.
middle - A linha de base do elemento é alinhada com o ponto definido pela linha de base do elemento pai mais metade da altura x da fonte do elemento pai, no contexto do conteúdo embutido.
bottom - A parte inferior da caixa do elemento é alinhada com a parte inferior da caixa de linha, no contexto do conteúdo embutido, ou com a parte inferior da célula da tabela no contexto das tabelas.
text-bottom - A parte inferior da caixa do elemento é alinhada com a parte inferior da caixa embutida mais baixa da linha.
percentage - A linha de base do elemento é aumentada ou diminuída pela porcentagem fornecida do valor para a altura da linha da propriedade.
length- A linha de base do elemento é aumentada ou diminuída pelo valor de comprimento fornecido. Valores de comprimento negativos são permitidos para esta propriedade. Um valor de comprimento de 0 para esta propriedade tem o mesmo efeito que a linha de base do valor.

Aplica-se a

elementos inline-level e elementos com uma exibição de table-cell.

Sintaxe DOM

object.style.verticalAlign = "baseline";

Exemplo

Aqui está o exemplo -

<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>

Isso produzirá o seguinte resultado -

↰ Previous page