Alignment Classes

Use below-listed classes to adjust the alignment of content or elements.

  • .align-l : Text align left
  • .align-r : Text align right
  • .align-c : Text align center
  • .align-m : Text align middle
  • .align-t : Text align top
  • .flex-tl : Align inner elements top left
  • .flex-tc : Align inner elements top center
  • .flex-tr : Align inner elements top right
  • .flex-cc : Align inner elements center center
  • .flex-cl : Align inner elements center left
  • .flex-cr : Align inner elements center right
  • .flex-bc : Align inner elements bottom center
  • .flex-bl : Align inner elements bottom left
  • .flex-br : Align inner elements bottom right

Example of flex alignment – center center inner element

<div class="container pos-rel h100 flex-cc">
 <div class="content">
 <h1 class="title large fs50 lh-2">Title text</h1>
 <p class="title-sub small fs30 lh-3">Sub title text</p>
 <p class="fs18 lh-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
 </div> 
</div>

 

Related Articles