Align Center Reference
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
-
Drag the AlignCenter pattern into the preview.
-
Set the Orientation parameter to Vertical.
-
Drag an image into the Align Center placeholder and add the
border-radius-circleclass. -
Drag a container into AlignCenter placeholder and set the horizontal alignment to Center.
-
In the container, add a Text widget with the text "Scott Ritchie" and have its Style Class set to
heading-4. -
Add another Text widget with the text "Marketing Communications Manager" and enclose it in a container.
-
Drag a container into the AlignCenter placeholder and add a Text widget.
-
Type the text "02 Jan" and have its Style Class set to
font-size-xs text-neutral-6.
-
Publish and test.
