How can I center an image within a div block in Webflow, with dimensions of 140x140 and 100px radius corners? I have tried removing styles and following a tutorial, but I am unable to vertically center the image. The blue line also appears above the div instead of within it. Any suggestions?

TL;DR
  • Add a div block with a width and height of 140px and a border radius of 100px.
  • Insert the image and set its size to 100% x 100% within the div.
  • Use Flexbox by enabling it on the div block, setting Align and Justify both to Center.
  • Ensure the div has a higher z-index if overlap issues occur and check for any overriding CSS.

Centering an image within a div block can be tricky if you've already tried a few things. Here's how you can do it:

​

1. Set Up Your Div Block

  • Add a Div Block to your Webflow page where you want to center the image.
  • Set Dimensions: Ensure the div block has a width and height of 140px.
  • Add Border Radius: Apply a border radius of 100px to achieve rounded corners.

​

2. Add and Style the Image

  • Insert the Image inside the div block.
  • Make sure the image dimensions are appropriate or set to ‘100% x 100%’ to fit the div's dimensions. 

​

3. Use Flexbox for Centering

  • Select the Div Block containing the image.
  • Enable Flexbox: Go to the Layout section and set the display to Flex.
  • Align Center: Set the Align option to Center and the Justify option to Center. This will center the image both vertically and horizontally within the div block.

​

4. Adjust Z-Index if Necessary

  • If the blue line appears above the div, check that the z-index of the div block is higher than surrounding elements if they are overlapping unexpectedly.

​

5. Double-Check Image Positioning

  • Remove Unnecessary Margins/Padding: Ensure there’s no unwanted padding or margin on the image or div that might be affecting the layout.
  • Check CSS Overrides: Make sure no other stylesheets or custom CSS are overriding your styles.

​

Summary

To center an image within a div block in Webflow, set the div's display to flex, adjust the align and justify properties to center, and verify image dimensions and parent container styles are correct. This ensures the image is perfectly centered with rounded corners.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I use Webflow to underline the second span text within a text block when hovering, similar to the headings on a specific website?
How can I align the text in the "MEET US" section to stay fixed to the right with a 20-30px separation from the photo in Webflow?
How can I prevent 404 errors in Google Search Console for CMS Collection Pages in Webflow that only contain a photo, name, and external links, without creating a layout or using redirects?
How can I make the bottom wrapper show on tablets and mobile devices in Webflow? I have applied SVH to the hero section, but it is still being clipped on an iPad (10") and is completely invisible on an iPhone (8). Any suggestions?
Can Webflow showcase only rented or for sale properties on a real estate website, based on the option field in the collection?
What are some third-party tools or integrations that can be used to create an accordion menu in Webflow?
In Webflow, how can I restrict the form field type number to only accept values greater than or equal to zero?
How should I handle the homepage of my multilingual website in Webflow when using language-specific folders for each page? How does this affect the setup of hreflang tags and the usage of subdomains?
Is there a way to increase the hard limit in Webflow?
How can I overlay text on a background image in Webflow?
How can I create a Webflow site with half-scrolling sections, where the left side controls the scrolling of the right side and the right side cannot be scrolled until it reaches the top of the page?
How can I round the corners of a link block in Webflow in a way that also rounds the corners of the image inside it?
How can I disable scroll on an embedded Google Maps iframe in Webflow?
How can I build a series of grids in Webflow that have the same height regardless of content, when column and flex box solutions don't work?
Does Webflow have an integration with SQUARE or any plans to develop one?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?