How can I add text below each image and center it according to the image in Webflow's 'data visualisations' tab while maintaining the correct ratio?

Published on
September 22, 2023

To add text below each image in Webflow's 'Data Visualizations' tab and center it according to the image while maintaining the correct ratio, you can follow these steps:

  1. Select the element containing the image in the 'Data Visualizations' tab.
  2. Click on the 'Position' tab in the right sidebar.
  3. Set the 'Position' property to 'Relative' to allow for positioning changes.
  4. Set the 'Display' property to 'Flex' to enable flexbox positioning.
  5. Set the 'Flex Direction' property to 'Column' to stack the image and text vertically.
  6. Set the 'Justify Content' property to 'Center' to center the image and text horizontally.
  7. Set the 'Align Items' property to 'Center' to center the text vertically.
  8. Add a new 'Div Block' element inside the container element.
  9. Place your desired text inside the newly created 'Div Block' element.
  10. Style the text as desired, adjusting the font size, color, and alignment.
  11. To maintain the correct ratio of the image, you can set its width to 100%. This will make sure the image stays within the container element and scales proportionally.

By following these steps, you can effectively add text below each image in the 'Data Visualizations' tab in Webflow while maintaining the correct ratio and centering it according to the image.

Additional Questions:

  1. How do I add text below an image in Webflow?
  2. Can I center text vertically and horizontally below an image in Webflow?
  3. How can I maintain the correct ratio of an image while adding text below it in Webflow's 'Data Visualizations' tab?