如何让<h3>标签高度一致且在容器中垂直居中？

垂直对齐差异与容器内容垂直居中方案 #

问题描述 #

我有两个<h3>标签，其中一个位置偏低。尝试设置margin: 0和padding后问题仍未解决，不清楚原因。删除align-items: center后<h3>高度一致了，但不知道如何在保持<h3>高度不变的前提下，让内容在容器中垂直居中。

原代码如下：

CSS #

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items:top;
}

HTML #

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>

问题根源 #

当父容器.info-footer设置align-items: center时，flex子项（.info-footer-info和.info-footer-menu）会以自身垂直中心对齐父容器。但两个子项内部内容高度不同（一个ul有4个列表项，另一个只有1个），导致子项整体高度不一致，最终视觉上呈现<h3>位置一高一低的效果。

解决方案 #

要同时满足<h3>高度一致、内容在父容器垂直居中，需要调整flex布局的层级：

• 父容器保持align-items: center，确保整个子项容器在.info-footer中垂直居中
• 给每个子项容器添加flex布局，强制它们高度一致，并让内部元素顶部对齐

修改后的代码如下：

CSS #

.info-footer {
  background-color: rgba(33, 40, 59, 0.8);
  color: #fff;
  border: 1px solid rgb(53, 56, 72);
  width: 100%;
  height: 14em;
  display: flex;
  justify-content: center;
  gap: 200px;
  padding: 20px 10px;
  align-items: center; /* 恢复垂直居中 */
}

/* 给子项容器添加flex布局 */
.info-footer-info, .info-footer-menu {
  display: flex;
  flex-direction: column;
  height: 100%; /* 强制子项高度与父容器内容区一致 */
  justify-content: flex-start; /* 内部元素顶部对齐 */
}

/* 重置h3的默认内外边距，确保高度一致 */
.info-footer-info h3, .info-footer-menu h3 {
  margin: 0;
  padding: 0;
}

HTML #

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">O nas</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Regulamin</a></li>
      <li><a href="#">Polityka Prywatności</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
</div>

说明 #

1. 子项容器设置height: 100%后，两个子项会继承父容器的可用高度，确保高度一致
2. justify-content: flex-start让子项内部的<h3>和ul始终从顶部开始排列，避免因内容多少导致的偏移
3. 重置<h3>的默认边距，消除浏览器默认样式带来的高度差异

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