Comment s'assurer que la hauteur de toutes les balises <h3> est cohérente

Question

J'ai reçu la balise h3. l'un des inférieurs J'ai essayé d'utiliser margin: 0 et padding mais cela n'a pas fonctionné et je ne sais pas où je me suis trompé.

Après avoir supprimé align-items: center, la hauteur a été corrigée, mais comment la centrer dans le conteneur d'image sans détruire la hauteur de h3 Image

.info-footer {
  couleur d'arrière-plan : rgba (33, 40, 59, 0,8) ;
  couleur : #fff ;
  bordure : 1px RVB solide (53, 56, 72) ;
  largeur : 100 % ;
  hauteur : 14em ;
  affichage : flexible ;
  justifier-contenu : centre ;
  écart : 200 px ;
  remplissage : 20px 10px ;
  aligner les éléments : haut ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="info-footer">
  <div class="info-footer-info">
    <h3>Menu 1</h3>
    <ul>
      <li><a href="#">À propos de nous</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Conditions générales</a></li>
      <li><a href="#">Politique de confidentialité</a></li>
    </ul>
  </div>
  <div class="info-footer-menu">
    <h3>Menu 2</h3>
    <ul>
      <li><a href="#">Contactez-nous</a></li>
    </ul>
  </div>
</div>

Answer 1

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

La fonction de

align-items est :

Sélectionnez center 表示将元素放置在 flex 容器的中心，并围绕此中心进行布局。换句话说，你的 footer-info 和 footer-menu pour aligner avec le centre du conteneur flexible, et non avec la position de départ.

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