vertical-align
A propriedade vertical-align do CSS especifica o alinhamento vertical de um inline ou caixa table-cell.
/* keyword values */
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;
/* <length> values */
vertical-align: 10em;
vertical-align: 4px;
/* <percentage> values */
vertical-align: 20%;
/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
A propriedade vertical-align pode ser usada em dois contextos:
- Para alinhar verticalmente uma caixa de elementos inline dentro dentro de sua caixa de linha. Por exemplo, poderia ser usado para alinhar verticalmente um
<img>em uma linha de texto:
- Para alinhar verticalmente o conteudo de uma celula em uma tabela:
Observe que vertical-align é aplicado apenas em elementos inline e table-cell: Você não pode usar isso para alinhar verticalmente elementos de nível de bloco.
| 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
This property is specified as one of the keyword values listed below.
Valores para elementos inline
Most of the values vertically align the element relative to its parent element: Essas propriedades alinham verticalmente o elemento relativamente a seu elemento pai
baseline-
Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like
<textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other. sub-
Aligns the baseline of the element with the subscript-baseline of its parent.
super-
Aligns the baseline of the element with the superscript-baseline of its parent.
text-top-
Aligns the top of the element with the top of the parent element's font.
text-bottom-
Aligns the bottom of the element with the bottom of the parent element's font.
middle-
Aligns the middle of the element with the baseline plus half the x-height of the parent.
<length>(en-US)-
Aligns the baseline of the element at the given length above the baseline of its parent.
<percentage>(en-US)-
Like <length> values, with the percentage being a percent of the
line-height(en-US) property.
(Negative values are allowed for <length> and <percentage>.)
The following two values vertically align the element relative to the entire line rather than relative to its parent:
top-
Align the top of the element and its descendants with the top of the entire line.
bottom-
Align the bottom of the element and its descendants with the bottom of the entire line.
For elements that do not have a baseline, the bottom margin edge is used instead.
Values (for table cells)
baseline(andsub,super,text-top,text-bottom,<length>, and<percentage>)-
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top-
Align the top padding edge of the cell with the top of the row.
middle-
Center the padding box of the cell within the row.
bottom-
Align the bottom padding edge of the cell with the bottom of the row.
Negative values are allowed.
Formal syntax
Exemplo
HTML
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
<div>An <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div>
<div>An <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div>
<div>An <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
CSS
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Output
Especificações
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'vertical-align' in that specification. |
Rascunho atual | Defines vertical-align as animatable. |
| CSS Level 2 (Revision 1) The definition of 'vertical-align' in that specification. |
Recomendação | Add the <length> (en-US) value and allows it to be applied to element with a display type of table-cell. |
| CSS Level 1 The definition of 'vertical-align' in that specification. |
Recomendação | Initial definition |
Compatibilidade com navegadores
BCD tables only load in the browser