CMS Design System

Use the vertical align utility on inline-level elements (inline and inline-block) and on table cells.

Format: .ds-u-valign--[top|middle|bottom]

.ds-u-valign--top .ds-u-valign--middle .ds-u-valign--bottom

Code snippet

<table>
  <tbody>
    <tr>
      <td
        class="ds-u-valign--top ds-u-padding--2 ds-u-border--0 utility-example"
        style="height: 150px"
      >
        <code>.ds-u-valign--top</code>
      </td>
      <td
        class="ds-u-valign--middle ds-u-padding--2 ds-u-border--0 utility-example"
        style="height: 150px"
      >
        <code>.ds-u-valign--middle</code>
      </td>
      <td
        class="ds-u-valign--bottom ds-u-padding--2 ds-u-border--0 utility-example"
        style="height: 150px"
      >
        <code>.ds-u-valign--bottom</code>
      </td>
    </tr>
  </tbody>
</table>