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 div block to 140px by 140px, use Flex display, and center content both horizontally and vertically.
- Ensure the image has no margin, fits the container (set width/height or use object-fit: cover), and check for any inherited or external styles causing misalignment like the blue line.
You're trying to vertically (and likely horizontally) center an image within a div block in Webflow, but running into issues—especially with an incorrect blue line indicator and layout alignment.
1. Set Up Your Div Block Correctly
- Select the div block that will contain your image.
- In the Style panel, set:
- Width and Height to
140px. - Border Radius to
100pxfor rounded corners (makes it appear circular). - Display to Flex.
- Justify (horizontal alignment) to Center.
- Align (vertical alignment) to Center.
- Overflow to Hidden, if you want to crop anything outside the border.
2. Style the Image
- Drag or select the Image element inside that div.
- In the Style panel:
- Make sure the Width and/or Height scale appropriately (or set to
100%if you want it to fill the container). - Remove any default margin on the image (especially top margin, which could be causing the blue outline to appear above).
- Optional: Set object-fit to cover (in the image settings panel) to ensure it resizes nicely inside the circle.
3. Check for Unexpected Margin or Padding
- Look at both the div block and image element in the Navigator and Style panels.
- Ensure there’s:
- No additional top padding or margin.
- No empty extra elements that may be pushing the content.
4. Identify the “Blue Line” Issue
- The blue line likely indicates padding or margin from an external source (such as the body or a parent container).
- Click the div or image and check applied styles (including inherited styles in the Style panel).
- Use Preview mode (eye icon) to confirm that the layout behaves as expected without editor overlays.
Summary
To center your image vertically in Webflow: set your div to a fixed size with flexbox, and center content both horizontally and vertically using justify/align center. Confirm that the image has no margin/padding and review any inherited styles. The blue outline is likely from editor UI or external margins—ensure only essential elements are present.