How can I center an image under a heading in Webflow on a new page?
TL;DR
- Add a new page and drag a Heading and Image element onto it.
- Place both elements inside a Div Block, and use Flexbox settings to center them vertically and horizontally.
To center an image under a heading in Webflow on a new page, follow these steps.
1. Add a New Page
- Go to the Pages panel in your Webflow project.
- Click the "+" button to create a new page.
- Name the new page appropriately.
2. Add a Heading Element
- Drag a Heading element onto the new page from the Add panel.
- Type in your desired text for the heading.
3. Add an Image Element
- Drag an Image element right below the Heading element.
- Upload or select an image you want to use from the Asset Manager.
4. Create a Parent Div Block
- Drag a Div Block from the Add panel and place the Heading and Image elements inside it.
- This will help in aligning both elements together.
5. Center the Contents
- Select the Div Block with the Heading and Image inside.
- Go to the Style panel and set the display setting to Flex.
- Choose the Vertical direction option.
- Select "Center" for both Horizontal and Vertical alignment.
Summary
To center an image under a heading in Webflow, create a new page, add both a Heading and Image element, wrap them in a Div Block, and use Flexbox settings to align them centrally. This approach ensures both elements are neatly aligned in the center of your page.
