Bagaimana untuk memastikan ketinggian semua teg <h3> adalah konsisten

Question

Saya mendapat teg h3. salah satu yang lebih rendah Saya cuba menggunakan margin: 0 dan padding tetapi ia tidak berjaya dan saya tidak tahu di mana silap saya.

Selepas mengalih keluar align-item: tengah, ketinggian telah ditetapkan, tetapi bagaimana untuk menjadikannya berpusat dalam bekas imej tanpa memusnahkan ketinggian h3 Gambar

.info-footer {
  warna latar belakang: rgba(33, 40, 59, 0.8);
  warna: #fff;
  sempadan: 1px pepejal rgb(53, 56, 72);
  lebar: 100%;
  ketinggian: 14em;
  paparan: flex;
  justify-content: pusat;
  jurang: 200px;
  padding: 20px 10px;
  align-item:top;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">Mengenai kami</a></li>
      <li><a href="#">Soalan Lazim</a></li>
      <li><a href="#">Terma dan Syarat</a></li>
      <li><a href="#">Dasar Privasi</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Hubungi kami</a></li>
    </ul>
  </div>
</div>

Answer 1

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

Fungsi

align-items ialah:

Pilih center 表示将元素放置在 flex 容器的中心，并围绕此中心进行布局。换句话说，你的 footer-info 和 footer-menu untuk menyelaraskan dengan tengah bekas flex, bukan kedudukan permulaan.

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