---
title: Vertical alignment
description: The Vertical Alignment utility offers classes to align elements – baseline, top, middle, bottom, text-top, and text-bottom.
---

## Types

```html
<span class="env-align--baseline">baseline</span>
<span class="env-align--top">top</span>
<span class="env-align--middle">middle</span>
<span class="env-align--bottom">bottom</span>
<span class="env-align--text-top">text-top</span>
<span class="env-align--text-bottom">text-bottom</span>
```

```html
<table class="example-vertical-alignment">
   <tbody>
      <tr>
         <td class="env-align--baseline">baseline</td>
         <td class="env-align--top">top</td>
         <td class="env-align--middle">middle</td>
         <td class="env-align--bottom">bottom</td>
         <td class="env-align--text-top">text-top</td>
         <td class="env-align--text-bottom">text-bottom</td>
      </tr>
   </tbody>
</table>
```