如何确保所有<h3>标签的高度一致

Question

我得到了h3标签。其中一个较低 我尝试使用margin: 0和padding，但它没有起作用，我不知道哪里出错了。

删除align-items: center后，修复了高度，但如何使其在图片容器中居中，而不破坏h3的高度 图片

.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;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>菜单1</h3>
    <ul>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">常见问题</a></li>
      <li><a href="#">条款和条件</a></li>
      <li><a href="#">隐私政策</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>菜单2</h3>
    <ul>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
</div>

Answer 1

从 .info-footer 样式中移除 align-items: center;。

align-items 的作用是：

选择 center 表示将元素放置在 flex 容器的中心，并围绕此中心进行布局。换句话说，你的 footer-info 和 footer-menu 与 flex 容器的中心对齐，而不是起始位置。

.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;
}

<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>