Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
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 propriedadevertical-align doCSS 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> <p> Align the star: <img 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 paraposicionar verticalmente uma imagem em uma linha de texto.
- Para alinhar verticalmenteo conteúdo de uma célula em uma tabela.
Observe quevertical-align só se aplica a elementos inline, inline-block e table-cell: você não pode usá-lo para alinhar verticalmenteelementos 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 propriedadevertical-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:
baselineAlinha a linha de base do elemento com a linha de base de seu pai. A linha de base de algunselementos 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.subAlinha a linha de base do elemento com a linha de base subscrita de seu pai.
superAlinha a linha de base do elemento com a linha de base sobrescrita de seu pai.
text-topAlinha a parte superior do elemento com a parte superior da fonte do elemento pai.
text-bottomAlinha a parte inferior do elemento com a parte inferior da fonte do elemento pai.
middleAlinha 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:
topAlinha o topo do elemento e seus descendentes com o topo de toda a linha.
bottomAlinha 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.
topAlinha a borda de preenchimento superior da célula com a parte superior da linha.
middleCentraliza a caixa de preenchimento da célula dentro da linha.
bottomAlinha 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 theline-height of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise the keyword as specified |
| Animation type | alength |
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 src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento de texto superior.</div><div> Uma imagem <img src="frame_image.svg" alt="link" width="32" height="32" /> com um alinhamento de texto inferior.</div><div> Uma imagem <img 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 src="star.png" /><br /> middle: <img src="star.png" /><br /> bottom: <img src="star.png" /><br /> super: <img src="star.png" /><br /> sub: <img src="star.png" /><br /></p><p> text-top: <img src="star.png" /><br /> text-bottom: <img src="star.png" /><br /> 0.2em: <img src="star.png" /><br /> -1em: <img src="star.png" /><br /> 20%: <img src="star.png" /><br /> -100%: <img src="star.png" /><br /></p>#* { box-sizing: border-box;}img { margin-right: 0.5em;}p { height: 3em; padding: 0 0.5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%;}Resultado
Alinhamento vertical em uma célula da tabela
HTML
<table> <tr> <td>baseline</td> <td>top</td> <td>middle</td> <td>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 |