CSS vertical-align

<!doctype html>
<title>Example</title>
<style>
  table {
    height: 80vh;
    width: 100%;
    font-size: 4vw;
    border-spacing: 2vw;
  }
  td {
    width: 33%;
    border: 2vw solid gold;
    padding: 5px;
  }
  .top {
    vertical-align: top;
  }
  .middle {
    vertical-align: middle;
  }
  .bottom {
    vertical-align: bottom;
  }
</style>
<table>
  <tr>
    <td class="top">Top</td>
    <td class="middle">Middle</td>
    <td class="bottom">Bottom</td>
  </tr>
</table>

The CSS vertical-align property is used for aligning inline-level and 'table-cell' elements vertically.

Syntax

Where

And

These values are explained below.

Possible Values

'baseline-shift'

This property specifies by how much the box is shifted up from its alignment point. It does not apply when alignment-baseline is top or bottom.

Can be one of the following values:

length: Raise (using a positive value) or lower (using a negative value) by the specified length.
percentage: Raise (using a positive value) or lower (using a negative value) by the specified percentage of the line-height.
sub: Lower by the offset appropriate for subscripts of the parent's box.
super: Raise by the offset appropriate for superscripts of the parent's box.

'alignment-baseline'

Specifies what point of an inline-level box is aligned to what point in the parent.

Can be one of the following values:

baseline: Uses the dominant baseline choice of the parent. Matches the box's corresponding baseline to that of its parent.
text-bottom: Aligns the bottom of the box with the bottom of the parent's content area.
alphabetic: Matches the box's alphabetic baseline to that of its parent.
ideographic: Matches the box's ideographic character face under-side baseline to that of its parent.
middle: Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
central: Matches the box's central baseline to the central baseline of its parent.
mathematical: Matches the box's mathematical baseline to that of its parent.
text-top: Matches the top of the box to the top of the parent's content area.
bottom: Aligns the bottom of the aligned subtree with the bottom of the line box.
center: Aligns the center of the aligned subtree with the center of the line box.
top: Aligns the top of the aligned subtree with the top of the line box.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: baseline
Applies To: Inline-level boxes
Inherited?: No
Media: Visual
Animatable: Yes (see example)

Example Code

Official Specifications

CSS Inline Layout Module Level 3 (W3C Working Draft, 24 May 2016)
CSS Level 2.1 (W3C Recommendation 07 June 2011)
CSS Level 1 (W3C Recommendation 17 Dec 1996)

Web.QHMIT.com