# Vertical Align

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

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

<EmbeddedExample>
<table>
  <tbody>
    <tr>
      <td class="ds-u-valign--top ds-u-padding--2 ds-u-border--0 utility-example" style={{ height: 150 }}>
        <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: 150 }}>
        <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: 150 }}>
        <code>.ds-u-valign--bottom</code>
      </td>
    </tr>
  </tbody>
</table>

</EmbeddedExample>