Paragraphs & wrapping
vertical-align
vertical-align sets where an image or other inline element sits vertically within its line. On a table cell, it sets where the cell’s contents sit vertically.
Syntax
[ first | last ] || <'alignment-baseline'> || <'baseline-shift'>Preview
あgCode
.box {
display: block;
}
.box > :nth-child(2) {
vertical-align: middle;
}Controls
About
Values
baseline: the initial value. Aligns the element's baseline with the parent's text baseline. An image's baseline is its bottom edge, so it sits on the text baseline, leaving a gap below it the size of the descender of letters like "g".middle: aligns the vertical midpoint of the element with the parent's baseline raised by half the height of a lowercase "x".text-top/text-bottom: aligns the top or bottom of the element with the top or bottom of the parent's text (the font's height).top/bottom: aligns the top or bottom of the element with the top or bottom of the line. The line's height comes from the tallest thing in it.sub/super: shifts to the subscript or superscript position. The browser decides how far.- Length or %: raises the element from the baseline (a negative value lowers it). A percentage refers to the element's own
line-height.
In table cells
On td and th, it sets where the cell's contents sit: top at the top, middle in the middle, bottom at the bottom, and baseline aligns the first-line baselines of the cells in the same row. The browser's default styles make HTML table cells middle.
Things to watch
- It only applies to inline elements such as
img,span, andinline-block, and to table cells. It has no effect on block elements or on flex and grid items (usealign-selffor those). - To remove the gap under an image, give the image
vertical-align: bottom(ortopormiddle), or make itdisplay: block.
Syntax only Firefox reads
The spec (CSS Inline Layout Module Level 3) turns vertical-align into a shorthand for the alignment baseline (alignment-baseline), the shift (baseline-shift), and the line to align in multi-line boxes (baseline-source), adding the forms below. Only Firefox supports them today; Chrome, Edge, and Safari ignore the whole declaration when it includes them.
- The alignment keywords
alphabetic,ideographic,central,mathematical, andhanging, and the shift keywordcenter - Combining an alignment and a shift, as in
middle 4px first/last: whether a multi-line element such as aninline-blockaligns by the baseline of its first or last line (by default,inline-blockuses the last line and everything else the first)
The preview places a gray bar that makes the line taller (the first child) and a sample image (the second child) within the text, and writes vertical-align on the image. The gray bar sets the top of the line, so you can see how top differs from text-top, and bottom from baseline. Because it has no effect on flex or grid items, a supporting declaration keeps the box a plain block (display: block).