How can I center an image under a heading in Webflow on a new page?
TL;DR
- Drag a Heading and Image onto the page.
- Select both, press CMD+G / CTRL+G to wrap them in a Div Block.
- Set the Div Block to Flexbox, choose Vertical direction, and center both Horizontally and Vertically.
- Adjust Margin/Padding if needed for spacing.
To center an image under a heading in Webflow, follow these steps:
1. Add the Heading and Image
- Drag a Heading element onto the page.
- Drag an Image element directly below the heading.
2. Wrap Both Elements in a Div Block
- Select both elements (Heading + Image).
- Press CMD+G (Mac) or CTRL+G (Windows) to group them into a Div Block.
3. Center the Content
- Select the Div Block and go to the Style panel.
- Set the Display to Flex and choose Flex Direction → Vertical (this stacks the elements).
- Set Justify to Center and Align to Center.
4. Adjust Spacing (Optional)
- Use Margin or Padding to add space between the heading and the image.
Summary
Nest the Heading and Image inside a Div Block, set Display to Flex, and apply vertical centering for perfect alignment.