如何对齐菜单图标和页眉文本

<div class="header">
  <div class="menu-icon"></div>
  <div class="header-text">页眉文本</div>
</div>

.header {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

.menu-icon {
  /* 菜单图标样式 */
}

.header-text {
  /* 页眉文本样式 */
}

<div class="header">
  <div class="menu-icon"></div>
  <div class="header-text">页眉文本</div>
</div>

.header {
  position: relative;
}

.menu-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%); /* 垂直居中对齐 */
  /* 菜单图标样式 */
}

.header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中对齐 */
  /* 页眉文本样式 */
}

<div class="header">
  <div class="menu-icon"></div>
  <div class="header-text">页眉文本</div>
</div>

.header {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列宽度自适应，第二列占剩余空间 */
  align-items: center; /* 垂直居中对齐 */
}

.menu-icon {
  /* 菜单图标样式 */
}

.header-text {
  /* 页眉文本样式 */
}