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