foundation-emails/test/visual/pages/alignment.html

A framework for responsive emails

<style>
  .columns {
    border: 1px solid dodgerblue;
  }
</style>

<container>
  <row>
    <columns class="small-4 large-4 columns first">
      <center>Centered Text</center>
    </columns>
    <columns class="small-4 large-4 columns">
      <center>Centered Text</center>
    </columns>
    <columns class="small-4 large-4 columns last">
      <center>Centered Text</center>
    </columns>
  </row>
</container>

<container>
  <row>
    <columns small="12" large="12">
      <p class="text-center">Centered Text</p>
      <h4 class="text-center">Centered Text</h4>
      <p class="text-right">Right Text</p>
      <h4 class="text-right">Right Text</h4>
      <p class="text-left">Left Text</p>
      <h4 class="text-left">Left Text</h4>
      <br/>
      <p>Center on all clients</p>
      <center>
        <img src="http://placehold.it/200?text=center" alt="">
      </center>
      <br/>
      <p>Center on all clients except Outlook 2007, 10, 13</p>
      <img class="float-center" src="http://placehold.it/200?text=center" alt="">
      <img class="float-right" src="http://placehold.it/200?text=right" alt="">
      <img class="float-left" src="http://placehold.it/200?text=left" alt="">
      
    </columns>
  </row>
</container>

<container>
  <row>
    <columns small="12" large="12">
      <row>
        <columns small="12" large="12">
        <p>Center on all (nested columns)</p>
          <center>
            <img src="http://placehold.it/200?text=center" alt="">
          </center>
        </columns>
      </row>
    </columns>
  </row>
</container>

<container>
  <row>
    <columns small="12" large="12">
      <row>
        <columns small="6" large="6">
          <p>Center on all (nested columns)</p>
          <center>
            <img src="http://placehold.it/200?text=center" alt="">
          </center>
        </columns>
        <columns small="6" large="6">
          <p>Center on all (nested columns)</p>
          <center>
            <img src="http://placehold.it/200?text=center" alt="">
          </center>
        </columns>
      </row>
    </columns>
  </row>
</container>

<container>
  <row>
    <columns small="4"></columns>
    <columns small="4">Centering a column</columns>
    <columns small="4"></columns>
  </row>

  <center>
    <button href="#">Center</button>
  </center>

  <row>
    <columns small="6" large="6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
      <center>
        <button href="#">Center</button>
      </center>
    </columns>
    <columns small="6" large="6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae error nam, sequi culpa deleniti aperiam saepe, similique laborum corrupti vitae iste mollitia reiciendis corporis qui, quae possimus eos quidem nostrum.</p>
      <center>
        <button href="#">Center</button>
      </center>
    </columns>
  </row>

  <row>
    <columns small="12" large="4">
      <callout>
        <h3 class="small-text-center">Presentations<span>8</span></h3>
        <spacer size="35"></spacer>
        <center>
          <img src="http://placehold.it/74x50">
        </center>
        <spacer size="40"></spacer>
      </callout>
    </columns>
    <columns small="12" large="8">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sapiente quis at fuga reprehenderit, velit iure fugiat debitis repellat assumenda perspiciatis? Commodi minus labore sit dolorem reprehenderit eveniet porro asperiores.</p>
    </columns>
  </row>

  <button class="success" href="https://litmus.com/checklist/emails/public/120ca5f">Passing Tests</button>

</container>