如何固定页眉div于顶部并使内部内容对齐至div底部？

我正在使用Pandoc将文件转换为PDF，通过HTML/CSS为文档设置仅适用于打印的样式，想要复刻Word文档的页眉效果：创建一个固定在每页顶部的<div>，内部包含三列内容：

• 左侧：底部对齐的图片
• 中间：底部对齐的分类文本
• 右侧：底部对齐的文档标题和版本号

当前代码运行后，图片已实现底部对齐，但分类、标题和版本号虽设置了bottom:0，仍保持顶部对齐，需要解决元素全部对齐至容器底部的问题。

原HTML代码 #

<div style="border: 1px solid black" class="div_header">
  <div>
    <img
      class="left bottom"
      src="images/my_image.png"
      alt="My Image"
    />
  </div>
  <div class="center bottom">Category</div>
  <div class="right bottom">
    <div class="right-text bottom">Title</div>
    <br />
    <div class="right-text bottom">Version 0.24</div>
  </div>
</div>

原CSS代码 #

.div_header {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.center {
  margin: 0 auto;
  text-align: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.right-text {
  text-align: right;
}
.bottom {
  bottom: 0;
}

问题根源在于bottom:0在flex容器中不生效，且混用了flex与float布局。利用flex的内置对齐属性即可实现所有元素底部对齐，修改后的代码如下：

修改后的HTML代码 #

<div style="border: 1px solid black" class="div_header">
  <div class="header-item">
    <img src="images/my_image.png" alt="My Image" />
  </div>
  <div class="header-item center">Category</div>
  <div class="header-item right">
    <div class="right-text">Title</div>
    <div class="right-text">Version 0.24</div>
  </div>
</div>

修改后的CSS代码 #

/* 限定样式仅在打印时生效 */
@media print {
  .div_header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* 让容器内所有子元素底部对齐 */
    align-items: flex-end;
    /* 设置固定高度，确保对齐基准一致 */
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .header-item {
    /* 子项占满容器高度，确保内部内容也能底部对齐 */
    height: 100%;
    display: flex;
    align-items: flex-end;
  }

  .center {
    margin: 0 auto;
  }

  .right {
    text-align: right;
  }

  /* 避免正文内容被页眉遮挡 */
  body {
    padding-top: 60px;
  }
}

关键调整说明 #

• 移除无用的float和bottom属性，改用flex布局的align-items: flex-end实现容器级的底部对齐
• 给每个子项添加header-item类，设置height:100%和内部flex对齐，确保文本也贴底
• 用@media print包裹样式，严格限定仅打印生效
• 添加页眉高度和正文内边距，解决内容被固定页眉遮挡的问题

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