Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

View in English Always switch to English

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

css

/* 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 (e sub, 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

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

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

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>

#* {
 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

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

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

Compatibilidade com navegadores

Veja também

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 de jan. de 1970⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content