Align X

Align any content horizontally on the X axis.

Class Result
.ax-leftalign horizontally left
.ax-rightalign horizontally right
.ax-centeralign horizontally center

Usage

Align uses the align="left|center|right property on table to align anything horizontally. When it is used with a table or td it will put that property directly on them, however if it is used on any other tag it will wrap that element with a table and align it accordingly.

<div class="ax-left">Align left on all viewport sizes</div><br>
<div class="ax-right">Align right on all viewport sizes</div><br>
<div class="ax-center">Align center on all viewport sizes</div>
<a class="btn btn-primary ax-right" href="http://bootstrapemail.com">Right Aligned Button</a>
Align left on all viewport sizes


Align right on all viewport sizes


Align center on all viewport sizes

Right Aligned Button

Compiled Example

Input

<div class="ax-left">Hello</div>
<div class="ax-center">WOWWWWW</div>
<div class="ax-right">Goodbye</div>

Output

<table class="ax-left" role="presentation" align="left">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">Hello</div>
      </td>
    </tr>
  </tbody>
</table>

<table class="ax-center" role="presentation" align="center" style="margin: 0 auto;">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">WOWWWWW</div>
      </td>
    </tr>
  </tbody>
</table>

<table class="ax-right" role="presentation" align="right">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
        <div class="">Goodbye</div>
      </td>
    </tr>
  </tbody>
</table>
On this page