Can't center align block inside grid

Design help Layout & Design
1

Hi, I’m having trouble getting my Project Cover Link which contains an image block to be centered within each grid cell. The parent element indicates content should be centered, I also tried additionally adding properties to the child elements, but can’t see to get them centered. Actually, this happens to me anytime I add an image block and reduce the width in %. I should be able to resize how wide I want the image while also controlling how it is justified and aligned on a page.

Screenshot 2024-04-16 at 7.06.21 PM
Screenshot 2024-04-16 at 7.06.21 PM1494×1134 84.5 KB

Read-only link:
https://preview.webflow.com/preview/abbyblue?utm_medium=preview_link&utm_source=designer&utm_content=abbyblue&preview=4286ef96af18c90ea154e569d3ae29db&pageId=661ea19b0a48f64652bdc48d&workflow=preview

2

commenting for reach

3

hi @altkey there is a several ways “how to”.

Here are two ways:

First Option

  1. set Project Cover Link as block
  2. set image as inline-block

Second Option

  1. set div as flex
  2. set direction of this flex as column
  3. X set center
  4. Y set center

your call :man_shrugging:

1 Like
4

That solved it, thank you very much! I’m finally getting familiar with Webflow but still run into a road block with a simple solution here and there. Thanks again.

1 Like
5

hi @altkey you will get there eventually but I always recommend to everyone take free courses of HTML and CSS before even touch WF to understand how things works as “no code” is not equal “no knowledge” :vulcan_salute:

6

I have done a fair share of HTML, CSS, and Python in the past and understand the logic, but definitely have lots more to learn!

1 Like