在Squarespace的Isotope可筛选画廊中实现图片列内居中

Hey there! Looks like you're almost there with your filterable gallery—let's get those images centered properly inside their columns. The issue here is that while you've set text-align: center on your list items, that only handles horizontal alignment for inline elements, and doesn't address vertical centering (plus, images can behave unexpectedly depending on their display property). Here's how to fix it:

Step 1: Update the .list__item Layout #

Instead of relying on text-align, use flexbox to center the image both horizontally and vertically within the list item. Flexbox is far more reliable for this kind of alignment, especially with fixed-height containers like your 12em tall items.

Modify your .list__item CSS to include flex properties:

.list__item {
  display: inline-block; /* Keep this for small screens, or replace with flex if needed */
  width: 100%;
  height: 12em;
  overflow: hidden;
  margin-bottom: 1em;
  margin: auto;
  /* Add these flex properties */
  display: flex;
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  font-size: 1em;
  text-transform: uppercase;
  color: white;
}

/* For media queries where .list is a flex container, this still works */
@media screen and (min-width: 600px) {
  .list {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
  }
  .list__item {
    width: calc(33% - 1em);
    /* Flex properties still apply here—no need to redefine them unless you want to override */
  }
}

Step 2: Style the Image to Fit Properly #

To make sure your images don't stretch or overflow the container while maintaining their aspect ratio, add these styles for the <img> tag:

.list__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Use 'cover' instead if you want the image to fill the container (cropping edges if needed) */
}

Why This Works #

• Flexbox's align-items: center and justify-content: center will center the image regardless of its size or display property.
• object-fit: contain ensures the entire image is visible within the list item without distortion. If you prefer the image to fill the entire space (even if parts are cropped), swap it with object-fit: cover.

Quick Check for Conflicts #

Make sure Isotope isn't overriding your layout styles—Isotope adds positioning to items, but flexbox should still work as expected. If you see any weird behavior, try adding position: relative to .list__item to stabilize the layout.

Give these changes a try, and your images should be perfectly centered in their columns now!

内容的提问来源于stack exchange，提问作者Michael Washbush