如何用Flexbox使.title-container与.header-container实现相同垂直对齐？

需要让页面中的.header-container和.title-container实现相同的布局效果：容器内元素两侧及元素间间距相等，窗口缩小时元素不会挤压变形。目前.header-container通过justify-content: space-around已达成预期，但.title-container添加相同属性后完全无效，需调整使其布局一致。

CSS #

* {
  font-family: 'Times New Roman', Times, serif;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
}

.header {
  background: #1F2937;
  color: white;
  display: flex;
  margin: 0;
  padding: 8px 0px 64px;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 64px;
}

.logo {
  font-size: 24px;
  color: #F9FAF8;
}

.link-container {
  display: flex;
  padding: 0;
  margin: 0;
  gap: 24px;
  font-size: 18px;
  color: #E5E7EB;
}

.title-container {
  display: flex;
  justify-content: space-around;
}

.title {
  font-size: 48px;
  font-weight: 900;
  color: #F9FAF8;
}

.title-info {
  font-size: 18px;
  color: #E5E7EB;
}

.image1-container {
  display: flex;
  background: gray;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

HTML #

<div class="header">
  <div class="header-container">
    <div class="logo">Header Logo</div>
    <div class="link-container">
      <div class="link1">Link 1</div>
      <div class="link2">Link 2</div>
      <div class="link3">Link 3</div>
    </div>
  </div>
  <div class="title-container">
    <div class="title">Website Title, This Site is Awesome!
      <div class="title-info">This is where I would put my info... If I had some!</div>
      <button class="button1">Sign Up</button>
    </div>
    <div class="image1-container">
      <div class="image1">This is a placeholder for an image...</div>
    </div>
  </div>
</div>

问题根源 #

.title-container的justify-content: space-around无效，核心原因有两个：

1. .title是块级元素，默认会占据容器的全部可用宽度，导致容器没有剩余空间分配间距；
2. .image1-container未设置固定尺寸，无法形成稳定的布局项，flex布局无法计算间距。

修改步骤及代码 #

1. 限制.title的宽度：给.title设置最大宽度或flex基础宽度，同时允许收缩，让容器产生剩余空间供justify-content分配。
2. 给.image1-container设置固定尺寸：定义宽高，让它成为稳定的布局项。
3. 添加垂直对齐：给.title-container加上align-items: center，让元素垂直居中，和.header-container的视觉对齐一致。
4. 优化.title内部布局：将.title设为flex列布局，让文本、按钮排版更合理。

修改后的CSS代码：

* {
  font-family: 'Times New Roman', Times, serif;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0; /* 去掉body默认margin，避免横向滚动 */
}

.header {
  background: #1F2937;
  color: white;
  display: flex;
  margin: 0;
  padding: 8px 0px 64px;
  flex-direction: column;
}

.header-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 64px;
}

.logo {
  font-size: 24px;
  color: #F9FAF8;
}

.link-container {
  display: flex;
  padding: 0;
  margin: 0;
  gap: 24px;
  font-size: 18px;
  color: #E5E7EB;
  align-items: center; /* 让链接和logo垂直居中 */
}

.title-container {
  display: flex;
  justify-content: space-around;
  align-items: center; /* 垂直居中元素 */
  gap: 32px; /* 增加元素间基础间距，窗口缩小时更美观 */
  padding: 0 16px; /* 避免边缘元素贴窗 */
}

.title {
  font-size: 48px;
  font-weight: 900;
  color: #F9FAF8;
  max-width: 500px; /* 限制最大宽度，避免占满容器 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 内部元素间距 */
}

.title-info {
  font-size: 18px;
  color: #E5E7EB;
  font-weight: normal; /* 取消继承的粗体 */
}

.button1 {
  width: fit-content;
  padding: 8px 32px;
  background: #3882F6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}

.image1-container {
  display: flex;
  background: gray;
  width: 500px; /* 设置固定宽度 */
  height: 250px; /* 设置固定高度 */
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* 窗口缩小时不挤压图片容器 */
}

修改后的HTML无需调整，保持原结构即可。

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