学校项目网站：图片居中均匀排列且下方带文字的布局问题求助

Hey there! Let's get that image layout sorted for your school project. The main issues with your current code are that float: left pushes all items to the left, and the absolute positioning on your text captions isn't properly tied to each image container.

Here's a modern, clean solution using Flexbox—it's perfect for creating responsive, evenly spaced layouts with minimal code:

Updated CSS Code #

/* Container for all image items */
.middle {
  display: flex;          /* Enable Flexbox layout */
  flex-wrap: wrap;        /* Allow items to wrap to new lines on small screens */
  justify-content: center;/* Center items horizontally */
  gap: 20px;              /* Add consistent space between items (better than margins) */
  padding: 20px 0;        /* Add vertical padding to the container */
}

/* Individual image + caption container */
.rowone {
  position: relative;     /* Make this the reference point for the absolute caption */
  width: 200px;           /* Fixed width for each item */
  margin-bottom: 40px;    /* Space below each item to avoid caption overlap */
}

/* Image styling */
.rowone img {
  width: 100%;            /* Make image fill its container */
  display: block;         /* Remove extra space below images */
}

/* Text caption styling */
.text {
  position: absolute;     /* Position caption relative to .rowone */
  bottom: 0;              /* Align caption to the bottom of the image */
  width: 100%;            /* Caption spans full width of the image */
  background-color: rgba(128, 128, 128, 0.8); /* Semi-transparent gray for readability */
  color: white;           /* White text for contrast */
  text-align: center;     /* Center the caption text */
  padding: 8px 0;         /* Add vertical padding for better spacing */
}

Updated HTML Code #

<section class="middle">
  <div class="rowone">
    <img src="images/logofootball.png" alt="Football Logo">
    <div class="text">Football</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" alt="Football Logo">
    <div class="text">Basketball</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" alt="Football Logo">
    <div class="text">Soccer</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" alt="Football Logo">
    <div class="text">Tennis</div>
  </div>
</section>

Key Improvements Explained: #

• Flexbox Layout: display: flex on .middle takes care of centering and spacing automatically. justify-content: center keeps everything aligned in the middle, and gap adds consistent space between items without messy margin calculations.
• Relative Positioning: Setting position: relative on .rowone ensures the caption (with position: absolute) stays attached to its parent image container, not the entire page.
• Better Caption Styling: The semi-transparent background (rgba()) makes text easier to read over the image, and full-width alignment ensures the caption matches the image size perfectly.
• Responsive Behavior: flex-wrap: wrap ensures items will wrap to new lines on smaller screens, keeping your layout mobile-friendly.

This should give you exactly what you need: images centered on the page, evenly spaced, with clean text captions below each one.

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