Vertical align utilities Since v1.1.0+

Halfmoon comes with utility classes which can be used to set the vertical alignment of elements.

Notation #

The class names for the vertical alignment utilities come in the format: .align-{value}, where the {value} can be baseline, top, middle, bottom, text-top, or text-bottom.

baseline top middle bottom text-top text-bottom
<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>/<th>). An example of this is shown below:

baseline top middle bottom text-top text-bottom
<!-- Vertical alignment of table cells -->
<table class="table table-bordered h-100"> <!-- h-100 = height: 10rem (100px) -->
      <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>