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">Top</div>
   <div class="position-bottom">Bottom</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 width value (such as text-measure-4). Useful for centering a website.

   <div class="center-horizontal text-measure-4"><div>object</div></div>

The margin-auto class, applied directly to the object you want centered, may also result in horizontal centering.

Center Vertical

Simple non-flexbox solution for centering content vertically. Place on the object itself that you want centered. Optionally, create <div> tags with a center-vertical class, and nest tags with the center-horizontal class inside, to center content in the middle of the screen.

   <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>