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
- Set the parent div to 140x140px, use Flexbox (align & justify center), and enable overflow: hidden.
- Set the image size to 140x140px, apply 100px border-radius, and use object-fit: cover.
- Check for negative margins, flex container alignment issues, or conflicting positioning styles if a blue line appears.
- Optionally, use Grid layout instead of Flexbox for centering.
It sounds like you're trying to center a 140x140 image within a div block while ensuring it has a 100px border-radius for rounded corners. The issue with the blue line appearing above the div suggests a potential positioning or display issue. Follow these steps to properly center the image.
1. Set Up the Parent Div Block
- Select the div block in Webflow.
- In the Style panel, set:
- Width:
140px - Height:
140px - Display:
Flex - Flex Direction:
Vertical - Align Items:
Center - Justify Content:
Center - Overflow:
Hidden(to ensure no extra spacing)
2. Configure the Image Within the Div
- Select the image element inside the div.
- In the Style panel, set:
- Width:
100%(or140pxto maintain fixed sizing) - Height:
100%(or140pxif not using100%) - Border Radius:
100px(to create fully rounded corners) - Object Fit:
Cover(to ensure the image fills without stretching)
3. Check Positioning Issues
If the blue line appears above the div, try:
- Ensuring no negative margins are applied to the div or image.
- Checking that the div is not inside an auto-aligned flex container affecting its position.
- Verifying that no Webflow positioning styles (e.g., relative, absolute, or float) are interfering.
4. Alternative Method Using Grid
- Set the parent div to Display: Grid (instead of Flex).
- Set grid alignment to
Centerfor both horizontal and vertical alignment.
Summary
To center the image in your Webflow div block:
- Use Display: Flex on the parent div and set align-items & justify-content to center.
- Ensure the image has 100px border-radius while maintaining
140x140px. - Check for unwanted margins or positioning conflicts causing layout shifts.
- Alternatively, use Grid for centering if Flexbox doesn’t work as expected.