Align Y

Vertically align the contents of a table cell on the Y axis.

Class Result
.ay-topvertical-align: top;
.ay-middlevertical-align: middle;
.ay-bottomvertical-align: bottom;
.ay-baselinevertical-align: baseline;
.ay-text-topvertical-align: text-top;
.ay-text-bottomvertical-align: text-bottom;

Usage

Vertical align allows you to vertically align the contents of a table cell. It can only be use in conjunction with a table cell. However most parts of Bootstrap Email are converted into tables so it can feel pretty automatic. You can also apply them directly to the parent table to adjust all of the td vertical alignments. If you are looking to vertically align child elements of a Stack, check out the alignment section of the Stack docs.

<table class="h-24">
  <tbody>
    <tr>
      <td class="ay-baseline">baseline</td>
      <td class="ay-top">top</td>
      <td class="ay-middle">middle</td>
      <td class="ay-bottom">bottom</td>
      <td class="ay-text-top">text-top</td>
      <td class="ay-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>
baseline top middle bottom text-top text-bottom

Compiled Example

Input

<table class="h-24">
  <tbody>
    <tr>
      <td class="ay-baseline">baseline</td>
      <td class="ay-top">top</td>
      <td class="ay-middle">middle</td>
      <td class="ay-bottom">bottom</td>
      <td class="ay-text-top">text-top</td>
      <td class="ay-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

Output

<table class="h-24" border="0" cellpadding="0" cellspacing="0" style="height: 96px;" height="96">
  <tbody>
    <tr>
      <td class="ay-baseline" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="baseline" height="96">baseline</td>
      <td class="ay-top" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="top" height="96">top</td>
      <td class="ay-middle" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="middle" height="96">middle</td>
      <td class="ay-bottom" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="bottom" height="96">bottom</td>
      <td class="ay-text-top" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="text-top" height="96">text-top</td>
      <td class="ay-text-bottom" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="text-bottom" height="96">text-bottom</td>
    </tr>
  </tbody>
</table>
On this page