How can I center an image under a heading in Webflow on a new page?
TL;DR
- Create a new static page and add a Section with a Container to the canvas.
- Insert a Heading and an Image into the Container, then set the Image to display block with left and right margins set to auto.
- Optionally, use Flexbox on the Container for more precise vertical and horizontal alignment.
To center an image under a heading on a new page in Webflow, you'll need to structure your elements and apply the right layout and alignment settings.
1. Create a New Page
- Go to Pages panel (left sidebar in Webflow Designer).
- Click the “+” icon next to Pages and select “Static Page”.
- Give your page a name (e.g., "Image Center Page") and click Create.
2. Add a Section and Container
- Drag a Section into the canvas.
- Drag a Container inside the Section. This helps keep your layout centered across screen sizes.
3. Insert Heading and Image
- Drag a Heading element (e.g., H1) into the Container.
- Drag an Image element directly under the Heading.
4. Center the Image
There are multiple ways to center the image, but for simple layout:
- Select the Image, go to the Style panel on the right.
- Set Display to Block.
- In Layout section, set Margin → Auto for Left and Right. This centers the image horizontally inside its container.
5. Optional: Use a Flexbox for More Control
If you need tighter control over alignment:
- Select the Container, set Display to Flex in the Style panel.
- Choose Flex Direction: Vertical Column.
- Set Justify: Center and Align: Center to center both the heading and image.
- Ensure the width of the container is appropriate for your layout needs.
Summary
To center an image under a heading on a new Webflow page, place both elements inside a centered Container, then set the image’s display to block and apply auto left/right margins. Alternatively, use Flexbox on the parent container to align the contents vertically and horizontally.