如何实现页脚Logo、图标与文本第一行的垂直居中对齐？

当前布局中，.row 的 align-items: center 会让Logo、图标容器与整个文本容器（两行文本）垂直居中，无法满足「仅与第一行文本垂直对齐」的需求。以下提供两种解决方案，优先推荐结构调整的方案，更简洁易维护。

方案一：调整HTML结构（推荐） #

通过拆分文本层级，让第一行文本与Logo、图标容器处于同一对齐基准层，第二行文本单独居中放置。

修改后的HTML代码 #

<footer>
  <div class="row">
    <p>Logo</p>
    <p class="main-text">A long long text</p>
    <div class="icon-container">
      <p>Icon 1</p>
      <p>Icon 2</p>
      <p>Icon 3</p>
    </div>
  </div>
  <p class="imprint">Imprint</p>
</footer>

修改后的CSS代码 #

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 20px; /* 保持原布局的文本垂直间距 */
}

footer p {
  margin: 0;
}

div.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.imprint {
  text-align: center; /* 让Imprint与上方文本水平对齐 */
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

效果说明

• .row 的 align-items: center 现在会让Logo、第一行文本、图标容器三者垂直居中，完全匹配需求；
• footer 的 gap: 20px 保留了原布局中两行文本的间距；
• .imprint 的 text-align: center 确保其与上方主文本水平对齐。

方案二：不修改HTML结构（绝对定位实现） #

若无法调整HTML结构，可通过绝对定位将第二行文本移出对齐基准层，仅让第一行文本参与垂直对齐。

修改后的CSS代码 #

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;
  padding-bottom: 40px; /* 预留Imprint的空间 */
}

footer p {
  margin: 0;
}

div.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-container {
  position: relative;
  align-items: center;
}

.text-container p:last-child {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px; /* 控制与第一行文本的间距 */
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

效果说明

• 第一行文本仍与Logo、图标容器垂直居中；
• 通过绝对定位将Imprint移到文本容器下方，并用 transform: translateX(-50%) 实现水平居中；
• 需给footer增加底部内边距，避免Imprint超出容器范围。

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