Webflow sync, pageviews & more.
NEW
Answers

How can I center an image under a heading in Webflow on a new page?

To center an image under a heading in Webflow on a new page, you can follow these steps:

1. Create a new page in Webflow and add a heading element to the page. You can do this by dragging and dropping a heading element from the Elements panel onto the canvas.

2. Customize the heading's text and style it as desired using the typography settings in the Style panel.

3. Add an image element to the page. You can do this by dragging and dropping an image element from the Elements panel onto the canvas, either below or inside the heading element.

4. Select the image element, and in the Style panel, go to the Positioning section. Under the "Position" dropdown, choose "Relative". This will allow us to position the image element in relation to the heading element.

5. Enable the "Center align" option in the display settings of the image element. This will horizontally center the image within its container.

6. Adjust the size and other styling properties of the image as needed using the settings available in the Style panel.

7. To vertically center the image under the heading, select the image element and navigate to the Positioning section in the Style panel. Under the "Margins" dropdown, choose "Auto" for both the top and bottom margins. This will automatically center the image vertically within its container.

8. If necessary, you can also adjust the margins and padding of the heading and image elements to create the desired spacing between them.

By following these steps, you should be able to center an image under a heading in Webflow on a new page. Remember to preview and publish your changes to see the final result.

Rate this answer

Other Webflow Questions