vertical-align

table.test tr td { vertical-align: baseline;}
table.test tr td { vertical-align: middle;}
span { vertical-align: super;}
span { vertical-align: text-bottom;}

Value	Description
baseline	Aligns the baseline of the first line of content in the cell with the baseline of the cell in the same row that has the lowest baseline. This 'baseline' is the initial value.
top	Aligns the top edge of the content within the cell with the top edge of the row it belongs to.
middle	Aligns the vertical center of the content within the cell with the vertical center of the row it belongs to.
bottom	Aligns the bottom edge of the content within the cell with the bottom edge of the row it belongs to.
super	This value is not applied to table cell elements; it is treated as if the initial value 'baseline' were specified.
sub	This value is not applied to table cell elements; it is treated as if the initial value 'baseline' were specified.
text-top	This value is not applied to table cell elements; it is treated as if the initial value 'baseline' were specified.
text-bottom	This value is not applied to table cell elements; it is treated as if the initial value 'baseline' were specified.

Value	Description
baseline	Aligns the baseline of the specified element with the baseline of the parent element. This 'baseline' is the initial value.
top	Aligns the top edge of the inline box of the specified element with the top edge of the containing line box.
middle	Aligns the vertical center of the inline box of the specified element with the midpoint of the lowercase 'x' height of the parent element.
bottom	Aligns the bottom edge of the inline box of the specified element with the bottom edge of the containing line box.
super	Raises the baseline of the specified element to the superscript position of the parent element.
sub	Lowers the baseline of the specified element to the subscript position of the parent element.
text-top	Aligns the top edge of the inline box of the specified element with the top of the parent element's font.
text-bottom	Aligns the bottom edge of the inline box of the specified element with the bottom of the parent element's font.
number	Moves the element from its original position by the specified numeric value. Positive values move upward, negative values move downward. Common units are 'px' and 'em'.

※ Version data is based on MDN.

Specifies the vertical alignment position of table cell elements or inline-level elements. Note that this property has many constraints and caveats.

First, the 'vertical-align' property can only be applied to inline-level elements or table cell elements. It is not inherited by child elements, so rather than specifying it on a parent element, you must specify it directly on the child element that is an inline-level element or table cell element. However, since the initial value of 'vertical-align' for th and td elements is 'inherit', they can inherit the 'vertical-align' value set on the parent table element.

<p style="vertical-align: top; border: solid 1px;"><img style="width: 200px;" src="/dics/dictionary-css/img/sample.jpg"><span>This is a span element.</span></p>

<table style="border: solid 1px red; vertical-align: middle;">
	<tr>
		<td style="height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a td element.</div></td>
		<td style="height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a td element.</div></td>
	</tr>
</table>

When using 'vertical-align' on table cell elements, the behavior is clearly defined and not overly complex. Simply specifying a value as shown below will apply the alignment. When 'top' or 'bottom' is specified, the reference size is the content box, placed against the top or bottom padding boundary. When 'middle' is specified, the vertical center of the content is aligned with the vertical center of the row (the vertical center of the cell).

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: top; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td><td style="vertical-align: top; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td></tr>
</table>

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: middle; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td><td style="vertical-align: middle; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td></tr>
</table>

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: bottom; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td><td style="vertical-align: bottom; height: 200px; border: solid 1px;"><div style="background-color: yellow;">This is a table cell element.</div></td></tr>
</table>

When 'baseline' is specified for table cell elements, some care is needed. As shown in the sample below, all cells in the same row align their baselines with the cell that has the lowest baseline. Note that only the baseline of the first line of content in each cell is aligned; from the second line onward, content is displayed according to the line box size as in normal line breaking.

Refer to the following image for baseline reference. Japanese text does not have a baseline, but it is positioned roughly as shown in the figure.

<table style="border: solid 1px red;">
	<tr><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow;">table cell</div></td><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow; font-size: 30px;">table cell</div></td><td style="vertical-align: baseline; height: 100px; border: solid 1px;"><div style="background-color: yellow; font-size: 40px;">table cell xyz</div></td></tr>
	<tr><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow;">table cell<br>table cell<br>table cell<br>table cell</div></td><td style="vertical-align: baseline; height: 200px; border: solid 1px;"><div style="background-color: yellow; font-size: 40px;">cell xyz</div></td><td style="vertical-align: baseline; height: 100px; border: solid 1px;"><div style="background-color: yellow; font-size: 20px;">table cell<br>table cell<br>table cell<br>table cell</div></td></tr>
</table>

When 'baseline' is specified for an inline-level element, the element's baseline is aligned with the parent element's baseline.

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: baseline; font-size: 14px;">This is a span element. xyz</span></p>

When 'top' is specified for an inline-level element, the top edge of the element's inline box is placed against the top edge of the containing line box. When 'bottom' is specified, the bottom edge is placed against the bottom edge of the containing line box.

Note that when using the 'line-height' property to adjust line box height, the 'line-height' property specifies the minimum line box height, so the line box may end up larger than expected. When specifying 'top' or 'bottom' for 'vertical-align', check the line box state in addition to the 'line-height' value.

<p style="border: solid 1px;"><span style="font-size: 30px;">This is a span element.</span><span style="vertical-align: top; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">This is a span element.</span><img style="vertical-align: top; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">This is a span element.</span><span style="vertical-align: bottom; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px;"><span style="font-size: 30px;">This is a span element.</span><img style="vertical-align: bottom; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

When 'middle' is specified for an inline-level element, the vertical center of the element's inline box is aligned with '0.5ex' from the parent element (half the height of a lowercase 'x'). Note that the reference point differs between table cell elements and inline-level elements when 'middle' is specified. Also note that in some older browsers, 'middle' may only apply to img elements; current browsers handle it correctly, but be aware if supporting older browsers.

<p style="border: solid 1px; font-size: 40px;">x<span style="vertical-align: middle; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px; font-size: 40px;">x<img style="vertical-align: middle; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

When 'super' is specified for an inline-level element, the element's baseline is raised to the superscript position of the parent. When 'sub' is specified, the element's baseline is lowered to the subscript position of the parent.

Refer to the following for information about superscript and subscript:

<p>Test<sup>This is superscript.</sup></p>
<p>Used for exponents, etc.</p>
<p>2<sup>100</sup></p>
<p>Test<sub>This is subscript.</sub></p>
<p>Used for chemical formulas, etc.</p>
<p>H<sub>2</sub>O</p>

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: super; font-size: 14px;">This is a span element. xyz</span></p>

<p style="border: solid 1px; font-size: 30px;">baseline xyz<span style="vertical-align: sub; font-size: 14px;">This is a span element. xyz</span></p>

When 'text-top' is specified for an inline-level element, the top edge of the element's inline box is placed against the top of the parent element's font. When 'text-bottom' is specified, the bottom edge is placed against the bottom of the parent element's font. Note that the reference here is always the parent element's font, so if the element does not appear in the expected position, try adding some text directly under the parent element to verify the position.

<p style="border: solid 1px; font-size: 40px;">text-top xyz<span style="vertical-align: text-top; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px; font-size: 40px;">text-top xyz<img style="vertical-align: text-top; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px; font-size: 40px;">text-bottom xyz<span style="vertical-align: text-bottom; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px; font-size: 40px;">text-bottom xyz<img style="vertical-align: text-bottom; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

When a numeric value is specified for an inline-level element, the element moves up or down from its natural position by the specified amount. Positive values move upward, negative values move downward. Common units are 'px' and 'em'. '%' can also be used, but the reference size varies by browser, so it may be best to avoid it. Normally, '%' is calculated relative to the line box size. Note that numeric values cannot be specified for table cell elements.

Note that specifying a numeric value for 'vertical-align' on an inline-level element affects the height of the containing line box. This can affect other elements in the same line and is generally quite difficult to use.

<p style="border: solid 1px; font-size: 40px;">20px xyz<span style="vertical-align: 20px; font-size: 14px;">This is a span element.</span></p>

<p style="border: solid 1px; font-size: 40px;">1em xyz<img style="vertical-align: 1em; width: 30px;" src="/dics/dictionary-css/img/sample.jpg"></p>

<p style="border: solid 1px; font-size: 40px;">100px xyz<span style="vertical-align: 100px; font-size: 14px;">This is a span element.</span></p>

To summarize: the 'vertical-align' property for inline-level elements tends to behave unexpectedly, and is best avoided where possible.

The most common use case for 'vertical-align' is vertical centering. In that case, it is easiest to set 'display' to 'table-cell' and then specify 'vertical-align: middle'.

<p>The following is an example of vertical centering using a combination of 'vertical-align: <span style="color: #f00">middle</span>' and 'display: <span style="color: #f00">table-cell</span>'.</p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;"><img style="width: 100px;" src="/dics/dictionary-css/img/sample.jpg"></p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;">This is a p element. <br>test test.</p>
<p style="vertical-align: middle; border: solid 1px; height: 200px; display: table-cell;"><img style="width: 150px;" src="/dics/dictionary-css/img/sample.jpg"></p>

As you can see, vertical alignment with CSS alone can be quite cumbersome. Depending on each element's situation, it may not be possible to achieve the expected alignment, so please be aware of this.