These docs are for the prereleased 1.0.0.alpha3 version of Bootstrap Email - Give Feedback

Vertical Align

Vertically align the contents of a table cell.

Class Result
.valign-topvertical-align: top;
.valign-middlevertical-align: middle;
.valign-bottomvertical-align: bottom;
.valign-baselinevertical-align: baseline;
.valign-text-topvertical-align: text-top;
.valign-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="valign-baseline">baseline</td>
      <td class="valign-top">top</td>
      <td class="valign-middle">middle</td>
      <td class="valign-bottom">bottom</td>
      <td class="valign-text-top">text-top</td>
      <td class="valign-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="valign-baseline">baseline</td>
      <td class="valign-top">top</td>
      <td class="valign-middle">middle</td>
      <td class="valign-bottom">bottom</td>
      <td class="valign-text-top">text-top</td>
      <td class="valign-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="valign-baseline" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="baseline" height="96">baseline</td>
      <td class="valign-top" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="top" height="96">top</td>
      <td class="valign-middle" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="middle" height="96">middle</td>
      <td class="valign-bottom" style="line-height: 24px; font-size: 16px; height: 96px; margin: 0;" align="left" valign="bottom" height="96">bottom</td>
      <td class="valign-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="valign-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>