HTML & CSS 头部元素对齐问题求助

要实现左侧logo、居中导航栏、右侧按钮在同一行对齐，采用Flexbox布局是最直接的方案，完全匹配目标网站的头部布局逻辑：

核心CSS调整 #

给头部容器添加以下样式，实现基础的行内对齐框架：

.header-container {
  display: flex;
  align-items: center; /* 让所有元素在垂直方向居中 */
  justify-content: space-between; /* 自动分配元素间的水平空间 */
  width: 100%;
  padding: 1rem 2rem;
  box-sizing: border-box;
}

各元素适配细节 #

• 左侧logo：保持自身尺寸即可，Flex布局会自动将其固定在左侧
• 居中导航栏：给导航容器添加flex: 1占据中间可用空间，再设置内部居中：

.nav-container {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2rem; /* 导航项之间的间距，可按需调整 */
}

• 右侧按钮：保持自身样式，Flex布局会自动将其推到最右侧

对应HTML结构示例 #

<div class="header-container">
  <div class="logo">
    <img src="logo.png" alt="品牌Logo">
  </div>
  <nav class="nav-container">
    <a href="#">首页</a>
    <a href="#">服务</a>
    <a href="#">关于我们</a>
  </nav>
  <button class="cta-button">立即咨询</button>
</div>

这套方案能确保三个元素始终在同一行垂直居中，同时适配不同屏幕宽度，和目标网站的头部表现一致。

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