Webflow sync, pageviews & more.
NEW

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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can scrolling be prevented when the off-canvas menu is open in Webflow?
Does the responsive image function of Webflow still work if the code is exported instead of using the Webflow server services?
How can I properly embed an Elfsight Instagram widget using Webflow's CMS so that each item in the collection can have its own unique widget displayed on the Collection page? I have tried adding the provided code as Plain Text in the CMS collection, as well as including the script in the site footer and Collection Page's custom code, but the div keeps appearing as text. Can you provide a clear solution for this issue?
What can I do to resolve the ERR_TOO_MANY_REDIRECTS message in Webflow when using Google Domains as my website's default domain?
How can I make changes to a cloned map in Webflow and ensure it still functions properly?
Why can't I add a checkbox inside a dropdown widget in Webflow? And how can I create a multi-select dropdown with an expanded view in Webflow that allows the user to select multiple options without relying on the Cmd key?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
How can I prevent the body from scrolling when the mobile menu overlay is active in Webflow?
Why are two images in my Webflow portfolio-grid page displaying with different heights in Safari compared to Chrome and Firefox? The images were uploaded to the CMS as 800x600 pixels and I created responsive images using the CMD + SHIFT + I command. Other images have their responsive images included in the markup, but these two do not. Disabling custom scripts did not solve the problem.
How can I fix an element to scroll within a section in Webflow, similar to the animation used for the share function on the Webflow blog?
How can I display items from CMS in an Embedded Google Maps using Webflow? I have embedded the Google Maps API and specified the location of the markers using custom code, but it is not taking the lat and lng variables from the CMS items. Any ideas on how to fix this?
How can Webflow help you create a simple customized online formula calculator without requiring web development or JavaScript skills?
How can I remove autoplay from a video background in Webflow and play the video with a button click? The code I have tried doesn't seem to work.
How can I correctly insert and float an image in a paragraph of text in Webflow, while ensuring it remains responsive across different screen sizes/layouts?
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?