如何实现响应式header中标题居中、图片仅置于右侧的布局

开发者阿泽

2026-10-26

用户提问

非常抱歉，我知道该需求是可以实现的，但我实在不擅长CSS。
目标效果：橙色吸顶header，居中的大写标题左侧紧邻飞机logo，标题下方配白色分隔线和斜体副标题。
我目前已经勉强做出了效果，但代码非常混乱。核心问题是我写的header完全没有响应式效果，我想知道实现该需求的最佳方案是什么（我知道通常构建响应式布局时使用flexbox是良好实践，但我遇到的问题是，如果用flexbox创建两栏布局，我没法让元素紧挨着对齐）。
以下是我当前的代码：

现有CSS代码

header {
  background-color: #c16200;
  color: white;
  margin-top: 1em;
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100%; /* Full width */
  z-index: 1;
  max-height: 8vh;
}

h1 {
  color: white;
  text-align: center;
  font-size: 2em;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}

.logo {
  position: absolute;
  top: 10px;
  right: 35%;
  height: 2.5em;
}

.line {
  margin: 0 auto;
  width: 17em;
  height: 2px;
  border-bottom: 2px solid white;
}

.header-sentence {
  margin-top: 0.2em;
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
  font-family: "Raleway", sans-serif;
}

现有HTML代码

<header id="myHeader" class="sticky">
  <div class="header-title">
    <h1>Title</h1>
    <img
      src="你的logo图片路径"
      class="logo"
      alt="logo plane"
    />
    <div class="line"></div>
    <p class="header-sentence">subtitle</p>
  </div>
</header>

实现方案

现有代码的核心问题

给.logo用position: absolute做固定偏移定位，屏幕宽度变化时，logo和标题的相对位置会完全错位，没有响应性。
给header加了overflow: hidden和*max-height: 8vh*的硬限制，内容超出高度时会被意外截断，无法适配不同尺寸的设备。
整体布局没有弹性空间，元素位置靠硬编码的偏移量控制，无法自动适配内容尺寸变化。

重构后的完整代码

不需要任何绝对定位，纯Flexbox实现，可自动适配所有屏幕尺寸：

重构后CSS

/* 全局基础重置，消除浏览器默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  background-color: #c16200;
  color: white;
  margin-top: 1em;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
  /* 用内边距控制高度，不写死最大高度，避免内容被截断 */
  padding: 0.8em 1em;
}

/* 包裹标题和logo的弹性容器，是解决对齐问题的核心 */
.header-top {
  display: flex;
  justify-content: center; /* 整体在header内水平居中 */
  align-items: center; /* 内部元素垂直居中对齐 */
  gap: 0.5em; /* 直接控制logo和标题的间距，不需要手动调margin */
}

h1 {
  color: white;
  font-size: 2em;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.logo {
  height: 2.5em; /* 高度和标题行高匹配，对齐自然 */
}

.line {
  margin: 0.2em auto 0;
  width: 17em;
  height: 2px;
  background-color: white; /* 用背景代替下边框，尺寸控制更直观 */
}

.header-sentence {
  margin-top: 0.2em;
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
  font-family: "Raleway", sans-serif;
}

/* 小屏幕适配，直接加媒体查询调整尺寸即可 */
@media (max-width: 768px) {
  h1 {
    font-size: 1.5em;
  }
  .logo {
    height: 2em;
  }
  .line {
    width: 12em;
  }
}

重构后HTML

<header id="myHeader" class="sticky">
  <div class="header-top">
    <img
      src="你的logo图片路径"
      class="logo"
      alt="logo plane"
    />
    <h1>Title</h1>
  </div>
  <div class="line"></div>
  <p class="header-sentence">subtitle</p>
</header>

Flexbox对齐说明

你之前遇到的“两栏没法紧挨着对齐”的问题，核心是没有把需要关联的元素放在同一个Flex容器中，反而用绝对定位脱离了文档流。把logo和标题放在同一个display: flex的容器里，用gap控制间距，justify-content: center让整体居中，不需要任何硬编码的偏移量，不管屏幕宽度怎么变化，两个元素的相对位置都不会错乱。

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