CSS布局求助：如何让头部右侧文本与左侧文本保持同一高度

嘿，Pedro！我明白你现在遇到的问题了——右侧文本没法和左侧的名字、职业文本保持同一高度，而是跑到下面去了对吧？这大概率是因为你没给header设置合适的布局方式，默认的块级元素布局会让每个元素占满一行，自然就会换行啦。

我推荐用CSS Flexbox来解决这个问题，它是处理这种横向对齐场景最顺手的工具。下面是完整的代码示例，你可以直接参考：

HTML结构 #

<header class="fundo-header">
  <div class="header-left">
    <h1>你的名字</h1>
    <p>journalist</p>
  </div>
  <div class="header-right">
    <p>右侧显示的文本</p>
  </div>
</header>

CSS样式 #

body {
  margin: 0;
  padding: 0;
}

.fundo-header {
  background-color: #2D2C2F;
  height: 14vh; /* 用vh更适配不同屏幕，你也可以用固定像素值 */
  display: flex; /* 开启弹性布局 */
  align-items: center; /* 让子元素垂直居中 */
  justify-content: space-between; /* 左右元素分别靠两端 */
  padding: 0 20px; /* 给内容加左右内边距，避免贴边 */
}

.header-left {
  display: flex;
  flex-direction: column; /* 让名字和职业垂直排列 */
  gap: 8px; /* 给两行文本加一点间距 */
}

/* 可选：调整文本样式，让它更美观 */
.header-left h1, .header-left p, .header-right p {
  color: white;
  margin: 0;
}

关键属性解释 #

• display: flex：把header变成弹性容器，里面的子元素（.header-left和.header-right）会变成弹性项，默认横向排列。
• align-items: center：让所有弹性项在垂直方向上居中对齐，这样右侧文本就会和左侧的两行文本保持同一高度了。
• justify-content: space-between：让左右两个容器分别靠在header的左右两端，中间自动填充空白。

你可以把这段代码替换你原来的部分，调整一下文本内容和样式细节，应该就能解决你的问题啦～

内容的提问来源于stack exchange，提问作者Pedro Henrique Quiste