Alignment

Mailbox made easy to align text, images, buttons and menu in HTML emails.

Text Alignment

Simple add class .text-left to align text left, .text-center to align text center and, .text-right to align text right. The text, buttons and images can also align with align=”” attribute of table. On mobile view, add classes .text-left–small, .text-center–small, .text-right–small to change positioning behaviour of an element.
Code
<table class="row" cellpadding="0" cellspacing="0" align="center" role="presentation" border="0">
   <tbody>
      <tr>
         <td align="center" valign="middle">
            <p class="text-small white text-left text-center--small">Save upto 50% on new arrivals</p>
         </td>
      </tr>
      <tr>
         <td class="spacer-small" valign="middle" align="center">&nbsp;</td>
      </tr>
      <tr>
         <td align="center" valign="middle">
            <h1 class="heading-large white text-left text-center--small">The Perfect Way to<br> Style in 2019</h1>
         </td>
      </tr>
      <tr>
         <td class="spacer-small" valign="middle" align="center">&nbsp;</td>
      </tr>
      <tr>
         <td align="center" valign="middle">
            <p class="text-small white text-left text-center--small">Free next day delivery on in-stock items ordered by 4:00 pm<br> on February 14, 2019</p>
         </td>
      </tr>
      <tr>
         <td class="spacer-small" valign="middle" align="center">&nbsp;</td>
      </tr>
      <tr>
         <td align="center" valign="middle">
             <!-- Button -->
             <table align="center" cellspacing="0" cellpadding="0" role="presentation" border="0">
                <tbody>
                   <tr>
                      <td class="button-filled" valign="middle" align="center">
                         <a class="button-filled" href="http://" target="_blank">
                            Buy New Collection Here
                         </a> 
                      </td>
                   </tr>
                </tbody>
             </table>
          </td>
       </tr>
   </tbody>
</table>
Preview