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

 

Related Articles