ブートストラップのナビゲーションバーのテキストを画像と揃えるにはどうすればよいですか?

Question

ブートストラップ ナビゲーション バーを使用しており、ナビゲーション バーのブランディングに画像を挿入しましたが、サイズが原因で位置合わせが台無しになります。それに付随するテキストを中央に揃えたいのですが、他のボタンのテキストも中央に揃える方法がわかりません。

出力は次のようになります

リーリー

ナビゲーション項目で配置を使用してみましたが、何をしても何も変わりません。ブートストラップを使用するのは初めてで、HTML の知識が限られているため、何をすればよいかわかりません。 #

Answer 1

実装の何が問題なのかわかりません。 ブートストラップのドキュメントで説明されているように、ナビゲーションコンテナを使用してスニペットをラップしようとしましたが、うまく見えました:

リーリー リーリー

おそらくそのラッパーが足りないだけですか?それとも、HTML ファイルの静的スタイルにブートストラップのスタイルを含めていないのでしょうか?

Answer 2

親要素のすべての <a> タグと navbar-brand <a> で in ブートストラップを使用してみることができます。以下に示すように、タグ d-flexalign-items-center クラス。これにより、要素が垂直方向の中央に配置されます。

リーリー