vertical-align
==============

A propriedade **`vertical-align`** do CSS define o alinhamento vertical de uma caixa inline, inline-block ou table-cell.

Experimente
-----------

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 (en-US), 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>` (en-US)

Alinha a linha de base do elemento ao comprimento especificado acima da linha de base de seu pai. Um valor negativo é permitido.

`<percentage>` (en-US)

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` (en-US). 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` (en-US) 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 =   
  [ (en-US) first | (en-US) last ] (en-US)        || (en-US)  
  <'alignment-baseline'>  || (en-US)  
  <'baseline-shift'>        
  
```

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 |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Casos de uso típicos do Flexbox, seção "Item central" (en-US)
* `line-height` (en-US), `text-align`, `margin`
* Entendendo `vertical-align`, ou "Como (não) centralizar o conteúdo verticalmente"
* Vertical-Align: Tudo o que você precisa saber