Skip to main content




Applies only to Traditional Web Apps

Align Center Reference

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    CSS Selectors

    Element CSS Class Description
    .center-align .center-align.flex-direction-row When Orientation parameter is Horizontal
    .center-align .center-align.flex-direction-column When Orientation parameter is Vertical

    Advanced use case

    Set vertical align with custom content

    1. Drag the AlignCenter pattern into the preview.

    2. Set the Orientation parameter to Vertical.

    3. Drag an image into the Align Center placeholder and add the border-radius-circle class.

    4. Drag a container into AlignCenter placeholder and set the horizontal alignment to Center.

    5. In the container, add a Text widget with the text "Scott Ritchie" and have its Style Class set to heading-4.

    6. Add another Text widget with the text "Marketing Communications Manager" and enclose it in a container.

    7. Drag a container into the AlignCenter placeholder and add a Text widget.

    8. Type the text "02 Jan" and have its Style Class set to font-size-xs text-neutral-6.

    9. Publish and test.

    • Was this article helpful?