如何水平居中含图片的浮动div？Ebay图片画廊布局求助

Hey there! I feel your pain—spending 3 hours on a layout glitch is the worst, especially when you're trying to get an eBay listing looking just right. Let's sort out why your floating image gallery won't center, and fix it with two reliable solutions.

Why Your Current Setup Isn't Working #

When you use float: left on your .gallery items, they break out of the normal document flow. That means their parent container can't calculate the total width of all the floating images, so tricks like margin: 0 auto or text-align: center on the parent won't do anything—your gallery stays stuck left-aligned.

Solution 1: Use Flexbox (Modern & Clean) #

Flexbox is perfect for this kind of layout, and it's widely supported across all modern browsers (including those eBay uses). It lets you easily center your gallery items, even when they wrap to new lines.

First, wrap all your .gallery divs in a parent container (like .gallery-container). Then add this CSS:

.gallery-container {
  display: flex;
  flex-wrap: wrap; /* Let items wrap to new lines */
  justify-content: center; /* Center items horizontally */
  gap: 10px; /* Optional: Add space between gallery items */
}

.gallery {
  border: 1px solid #ccc;
  width: 200px; /* Set a fixed width for your gallery items */
}

.gallery:hover {
  border: 1px solid #777; /* Fixed your typo here—was "soli" instead of "solid"! */
}

Your HTML will look like this:

<div class="gallery-container">
  <div class="gallery"><img src="your-image-1.jpg" alt="Product image 1"></div>
  <div class="gallery"><img src="your-image-2.jpg" alt="Product image 2"></div>
  <!-- Add all your gallery items here -->
</div>

Solution 2: Inline-Block (For Older CSS Support) #

If for some reason Flexbox isn't allowed (unlikely, but eBay sometimes has odd restrictions), you can use display: inline-block instead of floats. This keeps items in the document flow, so you can center them with text-align: center on the parent.

CSS:

.gallery-container {
  text-align: center;
  font-size: 0; /* Remove unwanted space between inline-block items */
}

.gallery {
  display: inline-block;
  border: 1px solid #ccc;
  width: 200px;
  margin: 5px; /* Add spacing between items */
  font-size: 16px; /* Reset font size so text inside works */
}

.gallery:hover {
  border: 1px solid #777;
}

This works because inline-block elements respect text-align on their parent, and you avoid the document flow issues that come with floats.

Quick Note About Your Code #

I noticed a small typo in your hover state: border: 1px soli... should be border: 1px solid...—that might have been causing unexpected behavior too!

Either of these solutions should get your gallery perfectly centered on the page. Give them a try, and let me know if you run into any snags.

内容的提问来源于stack exchange，提问作者Rick Morty