Align

‹ Back

You can align text by using the align__* classes:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div>
  <p class="align__left">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
  </p>
  <p class="align__center">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
  </p>
  <p class="align__right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat.
  </p>
</div>

You can perform basic floats using box-align__* classes. Don't forget to clear your floats using clearfix.

This is floated left
This is floated right
<div class="clearfix">
  <div class="box-align__left">
    This is floated left
  </div>
  <div class="box-align__right">
    This is floated right
  </div>
</div>

You can apply align classes to tables too to vertically align them:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<table class="table table__flush">
  <tr>
    <td class="align__top">Lorem ipsum dolor sit amet.</td>
    <td class="align__middle">Lorem ipsum dolor sit amet.</td>
    <td class="align__bottom">Lorem ipsum dolor sit amet.</td>
    <td>
      Lorem ipsum dolor sit amet.<br/>
      Lorem ipsum dolor sit amet.<br/>
      Lorem ipsum dolor sit amet.<br/>
    </td>
  </tr>
</table>