Vertical align utilities

Utility classes which can be used to set the vertical alignment of elements.

Notation #

The utility classes for setting the vertical alignment come in the format: .align-{value}, where the {value} can be baseline, top, middle, bottom, text-top, or text-bottom. These classes are shown in action in the example below.

baseline top middle bottom text-top text-bottom
HTML 
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

As table cells #

Vertical alignment is often useful for aligning the content of table cells. The alignment can be set by adding the above classes to the table cell elements (<td> or <th>).

baseline top middle bottom text-top text-bottom
HTML 
<table class="specific-h-100">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
Up next
Visibility utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.