如何確保所有<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>