So stellen Sie sicher, dass die Höhe aller <h3>-Tags konsistent ist

Question

Ich habe das h3-Tag erhalten. einer der unteren Ich habe versucht, margin: 0 und padding zu verwenden, aber es hat nicht funktioniert und ich weiß nicht, wo ich einen Fehler gemacht habe.

Nach dem Entfernen von align-items: center wurde die Höhe festgelegt, aber wie kann man sie im Bildcontainer zentrieren, ohne die Höhe von h3 zu zerstören? Bild

.info-footer {
  Hintergrundfarbe: rgba(33, 40, 59, 0,8);
  Farbe: #fff;
  Rand: 1 Pixel einfarbiges RGB (53, 56, 72);
  Breite: 100 %;
  Höhe: 14em;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Lücke: 200px;
  Polsterung: 20px 10px;
  align-items:top;
}

<div class="info-footer">
  <div class="info-footer-info">
    <h3>Menü 1</h3>
    <ul>
      <li><a href="#">Über uns</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Allgemeine Geschäftsbedingungen</a></li>
      <li><a href="#">Datenschutzerklärung</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menü 2</h3>
    <ul>
      <li><a href="#">Kontaktieren Sie uns</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>