如何实现图片均匀间距且居中对齐？前端布局求助

核心修改点 #

• 为flex容器添加justify-content: space-evenly实现子元素间均匀分布
• 修正图片与父容器的尺寸冲突，避免溢出
• 确保容器宽度计算正确，防止整体偏移

修改后的CSS代码 #

/*------------------------Outdoor-----------------------------*/
.outdoor{
    padding: 50px;
    display:flex;
    justify-content: space-evenly; /* 均匀分布子元素间距 */
    width: 100%;
    box-sizing: border-box; /* 让padding包含在总宽度内，避免容器超出视口 */
    flex-wrap: wrap; /* 响应式适配，小屏幕自动换行 */
}
.Kayaking, .Hiking, .museums{
    max-width: 500px; /* 限制子容器最大宽度 */
    width: 100%;
    text-align: center;
}
#kayak, #hiking, #museums{
    max-width: 100%; /* 图片自适应父容器宽度 */
    height: auto; /* 保持图片原始比例 */
    min-height: 350px; /* 可选：维持图片最低高度，避免内容参差不齐 */
}

修改后的HTML代码（仅补充图片路径，结构无需改动） #

<section class="outdoor">
    <div class="Kayaking">
        <img id="kayak" src="Images/kayak.jpg">
        <h1>Kayaking at Elliot Bay</h1>
        <p>Enjoy a wonder time kayaking at Elliot Bay. Best time to go right before sunset to see the sun go down behind the Mountains.</p>
    </div>
    <div class="Hiking">
        <img id="hiking" src="Images/hiking.jpg">
        <h1>Hiking at Rattlesnake Ledge</h1>
        <p>A hike at Rattlesnake Ledge is a must. Just 45 minutes West of Seattle, it's not too far to get away from the city and remain close.</p>
    </div>
    <div class="museums">
        <img id="museums" src="Images/museums.jpg">
        <h1>Seattle Museum of Pop Culture</h1>
        <p>Explore modern pop Culture! Excellent location for family and kids. Located just one block away from the space needle</p>
    </div>
</section>

关键说明 #

1. 均匀间距：justify-content: space-evenly会在三个子元素之间以及容器两侧分配相等的空间，彻底解决间距不均问题。
2. 尺寸适配：移除图片固定宽度，改用max-width:100%让图片自适应父容器，同时修正子容器宽度与图片的冲突，避免内容溢出。
3. 整体居中：通过box-sizing: border-box确保容器的padding不会导致宽度超出视口，配合justify-content实现整体布局的居中效果。
4. 响应式优化：添加flex-wrap: wrap，在小屏幕设备上自动将子元素换行，提升移动端体验。

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