如何用HTML5和CSS3创建带均等间距的横向图片拼贴

我是StackOverflow、HTML5和CSS3的新手，若此提问表述混乱，敬请谅解，希望能得到您的帮助。我想要实现图片间带有均等间距的横向图片拼贴效果，但目前无法对齐三张图片，以下是我目前的代码：

当前CSS代码 #

h1 {
    font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
    font-size: 2rem;
    font-weight: bold;
    color: #a71b1a;
    }

    h2 {
    font-family: 'Brother 1816 Bold Italic', Arial, Helvetica, 
    sans-serif;;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    }

    .collage_index_1 {
    align-content: center;
    }

当前HTML代码 #

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://use.typekit.net/tck7grc.css">
    <title>Freya Photos - Index</title>
  </head>
  <body>
    <main>
    <header>
      <!-- all the code related to the header here -->
    </header>

    <h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
    <h2> <center>We are where you are, helping you capture the moments of life.</center></h2>

    <!-- I cannot align these three images here: -->

    <div class="collage_index_group">
      <div class="collage_index_1">
        <img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel.">
      </div>
     
      <div class="collage_index_2">
        <img src="img/optimized images/bride-1867228_1920._250x250png.png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately">
      </div>

      <div class="collage_index_3">
        <img src="img/optimized images/smile-2072908_1920_250x250.png" alt="A portrait of a young woman holding an apple in her right hand, close to the face while looking straight into the camera, with a little smile">
      </div>
    </div>

    <footer>
      <!-- all the code related to the footer here -->
    </footer>
  </main>
  
</body>
</html>

要实现带均等间距的横向图片对齐，用CSS Flexbox布局是最直接的方案，只需对包裹图片的父容器.collage_index_group添加Flex相关样式即可，具体修改如下：

修改后的完整CSS代码 #

h1 {
    font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
    font-size: 2rem;
    font-weight: bold;
    color: #a71b1a;
    text-align: center; /* 替代<center>标签实现文字居中 */
}

h2 {
    font-family: 'Brother 1816 Bold Italic', Arial, Helvetica, 
    sans-serif;;
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    text-align: center; /* 替代<center>标签实现文字居中 */
}

/* 核心布局样式 */
.collage_index_group {
    display: flex; /* 启用Flex布局 */
    justify-content: space-between; /* 图片间自动分配均等间距，两端对齐 */
    align-items: center; /* 垂直方向居中对齐图片 */
    max-width: 900px; /* 限制容器最大宽度，避免图片过宽 */
    margin: 2rem auto; /* 水平居中容器，上下添加间距 */
    padding: 0 1rem; /* 左右留白，适配小屏幕 */
}

/* 统一三个图片容器的样式 */
.collage_index_1,
.collage_index_2,
.collage_index_3 {
    flex-shrink: 0; /* 防止图片容器被压缩 */
}

/* 确保图片自适应容器 */
.collage_index_group img {
    max-width: 100%;
    height: auto;
}

关键说明 #

• display: flex：将父容器转为Flex布局，子元素默认横向排列
• justify-content: space-between：让三张图片在容器内均匀分布，左右两端贴紧容器，中间自动生成均等间距
• align-items: center：保证所有图片在垂直方向上对齐，避免因图片尺寸差异导致错位
• 用text-align: center替代<center>标签，符合现代HTML规范（<center>已被废弃）
• 添加max-width和padding可以让布局在不同屏幕尺寸下更友好

内容的提问来源于stack exchange，提问作者Pontus Ydström