Layout Position

Position elements within a container.

Layout Position

These absolute position classes are helpful for displaying content within a container. The class evo-position must be placed on a parent container.

   <div class="position-top-left">Top Left</div>
   <div class="position-top-right">Top Right</div>
   <div class="position-bottom-left">Bottom Left</div>
   <div class="position-bottom-right">Bottom Right</div>
   <div class="position-left">Left</div>
   <div class="position-right">Right</div>
   <div class="position-middle">Middle</div>
   <div class="position-top-middle">Top Middle</div>
   <div class="position-bottom-middle">Bottom Middle</div>

Center Horizontal

Simple non-flexbox solution for centering content horizontally. Place in the parent container to the object you want centered, along with a max-width class such as .text-measure-4. Useful for centering a website.

   <div class="center-horizontal evo-measure-1"><div>object</div></div>

Center Vertical

Simple non-flexbox solution for centering content vertically. Place on the object itself that you want centered.

   <div class="center-vertical">object</div>

Flex Center Vertical

Simple flexbox solution for centering content vertically. Place in the parent container to the object you want centered.

   <div class="flex-center-vertical">object</div>