在这个CSS网格中，如何将内容放置在标题的左右两侧？

在附加的代码段中，网格的标题部分包含向左对齐的文本。如何添加与网格最右侧部分对齐的其他文本？另外，我想知道如何将文本垂直居中，因为它目前位于中间上方。我曾尝试添加另一个div，并使用justify content和align items，但到目前为止，我所尝试的都没有成功。非常感谢您的帮助。多谢各位

身体{ 显示：网格； 网格模板区域：页眉导航文章广告导航页脚； 网格模板行：80px 1fr 70px； 网格模板柱：20%1fr 15%； 网格行间距：10px； 栅柱间隙：10px； 高度：100vh； 保证金：0； } 标题， 页脚， 文章 导航， div{ 填料：1.2米； 背景：金； } 页眉{ 网格区域：标题； } 页脚{ 网格区域：页脚； } 主文{ 网格区域：文章； } 主导航{ 网格区域：导航； } 网站广告{ 网格区域：ads； } /*将布局堆叠在小型设备/视口上*/ @全部介质和最大宽度：575px{ 身体{ 网格模板区域：页眉文章广告导航页脚； 网格模板行：80px 1fr 70px 1fr 70px； 网格模板列：1fr； } } 标题 文章 导航 广告 页脚您可以在页眉中创建左右元素，然后为页眉提供以下样式：

页眉{ 显示器：flex； 对齐项目：居中；/*居中子项*/ 对齐内容：两个子项之间的空格；/*单独的子项*/ } 请参见下面的示例代码段：

身体{ 显示：网格； 网格模板区域：页眉导航文章广告导航页脚； 网格模板行：80px 1fr 70px； 网格模板柱：20%1fr 15%； 网格行间距：10px； 栅柱间隙：10px； 高度：100vh； 保证金：0； } 标题， 页脚， 文章 导航， div{ 填料：1.2米； 背景：金； } 页眉{ 网格区域：标题； 显示器：flex； 对齐项目：居中； 证明内容：之间的空间； } 页脚{ 网格区域：页脚； } 主文{ 网格区域：文章； } 主导航{ 网格区域：导航； } 网站广告{ 网格区域：ads； } /*将布局堆叠在小型设备/视口上*/ @全部介质和最大宽度：575px{ 身体{ 网格模板区域：页眉文章广告导航页脚； 网格模板行：80px 1fr 70px 1fr 70px； 网格模板列：1fr； } } CSS网格模板1 左头球 标题右侧 文章 导航 广告 页脚 将header元素设置为flex容器，然后使用

justify-content: space-between; 

将左侧的标题文本与右侧的附加文本对齐

要使标题内容垂直居中，请使用

您需要更改header元素的HTML结构，如下所示：

<header id="pageHeader">
  <span>Header</span>
  <span>I will be on right side</span>
</header>

输出：

---

是的，我的想法很明确，谢谢！使用此代码，如果我尝试将图像放在旁边，我将在右侧，它将堆叠在顶部。flex容器是否有办法将其并排放置？您是否可以编辑您的问题，以显示您如何尝试在标题中添加图像或与标题中的图像共享指向演示的链接？

<header id="pageHeader">
  <span>Header</span>
  <span>I will be on right side</span>
</header>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}