すべての <h3> タグの高さを確実に一致させる方法

Question

<p>h3タグを取得しました。下の一つ margin: 0 とpaddingを使用してみましたが、機能せず、どこで間違ったのかわかりません。 </p> <p>align-items: centerを削除した後、高さは固定されましたが、h3の高さを崩さずに画像コンテナの中央に配置する方法 画像</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.info-footer { 背景色: rgba(33, 40, 59, 0.8); 色: #fff; ボーダー: 1px ソリッド rgb(53, 56, 72); 幅: 100%; 高さ: 14em; ディスプレイ: フレックス; コンテンツの位置揃え: 中央; ギャップ: 200ピクセル; パディング: 20px 10px; 整列項目:上; }</pre> <pre class="brush:html;toolbar:false;"><div class="info-footer"> <div class="情報フッター情報"> <h3>メニュー 1</h3>

<li><a href="#">会社概要</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー ポリシー</a></li> </ul> </div> <div class="情報フッターメニュー"> <h3>メニュー 2</h3>
<li><a href="#">お問い合わせ</a></li> </ul> </div> </div></pre> <p><br /></p>

Answer 1

align-items: center; を .info-footer スタイルから削除します。

align-items 関数は次のとおりです:

center を選択するということは、要素を flex コンテナの中心に配置し、この中心の周りにレイアウトすることを意味します。言い換えると、footer-info と footer-menu は、開始位置ではなく、フレックス コンテナの center に揃えられます。 。

リーリー リーリー