Vertically Center an Image in a Card Image Block (Updated March 2021)

Do you have a really long image description and want the image to be centered vertically compared to the text?

The Squarespace Editor does not give you the option to change the vertical alignment of images in an image block.

So, in this video I show you how to vertically center an image in an image card block in both Squarespace 7.0 and 7.1.

All the code used in the video is provided below!

The following code has been updated since the video was recorded to take mobile responsiveness into consideration.

/* Card Image Block */
@media only screen and (min-width: 800px) {
  .image-block .design-layout-card {
    display: flex;
    align-items: center;
  }
}

Here are some other posts you may like:

• Add a Vertical Line to Squarespace

• Grid Gallery Captions on Hover | Squarespace 7.1

• Style Image Caption on Hover in Squarespace 7.1