Bootstrapでナビの文字を縦方向の中央に配置する方法
Webサイトを作るときに、CSSフレームワークのBootstrapを利用しています。
Bootstrap4でナビげーションの中に文字を配置すると、そのままだと上寄せになってしまいました。
ナビゲーションの中にある他のリンクの文字の位置と比べると、上に寄ってしまっているので、見た目が良くありません。
ナビの中の文字の位置を指定する方法を調べてみました。
bootstrap ナビ 文字 中央 縦 - Google 検索
d-flexクラスで指定
Bootstrap4で縦方向（垂直）に文字の位置を指定する方法が紹介されていました。
これをナビの中でも指定すればOKでした。
上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。
flexboxを利用するため、それぞれ２つのクラスを指定すればOKです。
<div class="d-flex align-items-center">
上下中央寄せされる
</div>
<div class="d-flex align-items-start">
上寄せされる
</div>
<div class="d-flex align-items-end">
下寄せされる
</div>
Align items
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
↑こんなかんじになります。
これでナビゲーションの中の文字の位置が揃えることができました。
