Align
‹ BackYou 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
.
<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>