vertical-align
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
A propriedade vertical-align do CSS define o alinhamento vertical de uma caixa inline, inline-block ou table-cell.
Experimente
vertical-align: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; vertical-align: sub; vertical-align: text-top; <section class="default-example" id="default-example"> <p> Align the star: <img id="example-element" src="/shared-assets/images/examples/star2.png" /> </p> </section> #default-example > p { line-height: 3em; font-family: monospace; font-size: 1.2em; text-decoration: underline overline; } A propriedade vertical-align pode ser usada em dois contextos:
- Para alinhar verticalmente a caixa de um elemento inline dentro da caixa de linha que a contém. Por exemplo, pode ser usado para posicionar verticalmente uma imagem em uma linha de texto.
- Para alinhar verticalmente o conteúdo de uma célula em uma tabela.
Observe que vertical-align só se aplica a elementos inline, inline-block e table-cell: você não pode usá-lo para alinhar verticalmente elementos em nível de bloco.
Sintaxe
/* Valores de palavra-chave */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* valores <comprimento> */ vertical-align: 10em; vertical-align: 4px; /* valores <porcentagem> */ vertical-align: 20%; /* Valores globais */ vertical-align: inherit; vertical-align: initial; vertical-align: revert; vertical-align: revert-layer; vertical-align: unset; A propriedade vertical-align é especificada como um dos valores listados abaixo.
Valores para elementos inline
Valores relativos aos pais
Esses valores alinham verticalmente o elemento em relação ao seu elemento pai:
baseline-
Alinha a linha de base do elemento com a linha de base de seu pai. A linha de base de alguns elementos substituídos, como
<textarea>, não é especificada pela especificação HTML, o que significa que seu comportamento com esta palavra-chave pode variar entre os navegadores. sub-
Alinha a linha de base do elemento com a linha de base subscrita de seu pai.
super-
Alinha a linha de base do elemento com a linha de base sobrescrita de seu pai.
text-top-
Alinha a parte superior do elemento com a parte superior da fonte do elemento pai.
text-bottom-
Alinha a parte inferior do elemento com a parte inferior da fonte do elemento pai.
middle-
Alinha o meio do elemento com a linha de base mais metade da altura x do pai.
<length>-
Alinha a linha de base do elemento ao comprimento especificado acima da linha de base de seu pai. Um valor negativo é permitido.
<percentage>-
Alinha a linha de base do elemento à porcentagem fornecida acima da linha de base de seu pai, com o valor sendo uma porcentagem da propriedade
line-height. Um valor negativo é permitido.
Valores relativos à linha
Os seguintes valores alinham verticalmente o elemento em relação à linha inteira:
top-
Alinha o topo do elemento e seus descendentes com o topo de toda a linha.
bottom-
Alinha a parte inferior do elemento e seus descendentes com a parte inferior de toda a linha.
Para elementos que não possuem uma linha de base, a borda da margem inferior é usada.
Valores para células da tabela
baseline(esub,super,text-top,text-bottom,<length>e<percentage>)-
Alinha a linha de base da célula com a linha de base de todas as outras células na linha que estão alinhadas com a linha de base.
top-
Alinha a borda de preenchimento superior da célula com a parte superior da linha.
middle-
Centraliza a caixa de preenchimento da célula dentro da linha.
bottom-
Alinha a borda de preenchimento inferior da célula com a parte inferior da linha.
Valores negativos são permitidos.
Definição formal
| Initial value | baseline |
|---|---|
| Aplica-se a | inline-level and table-cell elements. It also applies to ::first-letter and ::first-line. |
| Inherited | não |
| Percentages | refer to the line-height of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | a length |
Sintaxe formal
vertical-align =
[ first | last ] ||
<'alignment-baseline'> ||
<'baseline-shift'>
<alignment-baseline> =
baseline |
text-bottom |
alphabetic |
ideographic |
middle |
central |
mathematical |
text-top
<baseline-shift> =
<length-percentage> |
sub |
super |
top |
center |
bottom
<length-percentage> =
<length> |
<percentage>
Exemplos
Exemplo básico
HTML
<div> Uma imagem <img src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento padrão. </div> <div> Uma imagem <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento de texto superior. </div> <div> Uma imagem <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento de texto inferior. </div> <div> Uma imagem <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento médio. </div> CSS
img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } Resultado
Alinhamento vertical em uma caixa de linha
HTML
<p> top: <img style="vertical-align: top" src="star.png" /><br /> middle: <img style="vertical-align: middle" src="star.png" /><br /> bottom: <img style="vertical-align: bottom" src="star.png" /><br /> super: <img style="vertical-align: super" src="star.png" /><br /> sub: <img style="vertical-align: sub" src="star.png" /><br /> </p> <p> text-top: <img style="vertical-align: text-top" src="star.png" /><br /> text-bottom: <img style="vertical-align: text-bottom" src="star.png" /><br /> 0.2em: <img style="vertical-align: 0.2em" src="star.png" /><br /> -1em: <img style="vertical-align: -1em" src="star.png" /><br /> 20%: <img style="vertical-align: 20%" src="star.png" /><br /> -100%: <img style="vertical-align: -100%" src="star.png" /><br /> </p> Resultado
Alinhamento vertical em uma célula da tabela
HTML
<table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p> Existe uma teoria que afirma que se alguém descobrir exatamente para que serve o Universo e por que ele está aqui, ele desaparecerá instantaneamente e será substituído por algo ainda mais bizarro e inexplicável. </p> <p>Há outra teoria que afirma que isso já aconteceu.</p> </td> </tr> </table> CSS
table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; } Resultado
Especificações
| Specification |
|---|
| CSS Inline Layout Module Level 3 # propdef-vertical-align |