Webflow sync, pageviews & more.
NEW
Answers

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?

To center an image within a div block in Webflow, you can use Flexbox or absolute positioning. Here's how you can do it using Flexbox:

1. Select the div block containing the image.
2. Set the display property to flex by going to the Styles panel and choosing "Flex" from the Display dropdown menu.
3. Set the justify-content property to center to horizontally center the image within the div block.
4. Set the align-items property to center to vertically center the image within the div block.
5. Set the width and height of the div block to 140px.
6. To add rounded corners, go to the Styles panel, click the "+" icon next to the Border property, and set the radius to 100px.

Now, regarding the blue line appearing above the div block instead of within it, it sounds like there might be some overlapping elements or z-index issues. Here are a few things you can check:

1. Make sure that the image div block is not positioned absolutely with a higher z-index than its parent or other overlapping elements. If it is, you can either adjust the positioning or z-index values to prevent it from layering above other elements.
2. Check if there are any other elements, such as a sibling or parent element, that might have a position:relative or absolute, which could affect the stacking order.
3. Confirm that the blue line is within the div block by checking its parent-child relationship in the Navigator panel. If it's not within the div block, you may need to move it inside or adjust its positioning.

If you're still facing issues, it would be helpful to see your project or the affected code so I can provide more specific guidance.

Rate this answer

Other Webflow Questions