Skip to Main Content

Cheat Codes for Advanced Layout in LibGuides: Centering

Centering Text within an Element

In the HTML

Add class="center-text" to the element (ex. <p class="center-text">text</p>).


Example

Lorem ipsum dolor sit amet, consectetur adip elit. Aenean purus enim, volutpat ac dolor et, solli vehicula felis.

Centering Element with Flex

In the HTML

Requires element to be nested in another container (usually a <div>). In the container, add class="flex center". Flexbox automatically adjusts the container size, so that it is centered horizontally and the text within it appears centered.


Example

Morbi porta ipsum id dolor convallis mollis.

Top Bottom