CSSでの文字位置の上下センタリング

こんにちは、画像のようなナビゲーションメニューを作ったのですが、メニュー内の文字が上に寄ってしまいます。

リンクのホバーなどはそのままで、文字だけを上下のセンターに表示させたいのですが、詳しい方よろしくお願いします

No.3 ベストアンサー 回答者： ssawatake 回答日時： 2023/03/08 19:47

liの高さを指定し、lineの高さも指定する。

liの高さが20pxなら

height:20px;
line-height:20px;
の2行を.sitemenu liに追加。

この回答へのお礼

なるほど、基本的な事を抑えれてなかったのですね、ありがとうございます。

解消しました！

お礼日時：2023/03/08 19:48

No.2 回答者： josh2015 回答日時： 2023/03/08 19:27

画像もぼやけていて何をやりたいかわかりません

ソースコードぐらい載せたらどうですか

No.1 回答者： ミラ-_- 回答日時： 2023/03/08 19:00

CSSでテキストを上下中央揃えにするには、以下の方法があります。

line-heightプロパティを使用する方法
テキストの親要素に対して、line-heightプロパティを使用して高さを設定します。この値は、フォントサイズより大きくなければなりません。例えば、フォントサイズが16pxの場合、line-heightは16pxより大きい値に設定します。

.nav-link {
display: inline-block;
line-height: 40px; /* フォントサイズより大きな値に設定 */
padding: 0 20px;
text-decoration: none;
}
flexboxを使用する方法
親要素に対して、display: flexを使用してflexboxを作成し、align-itemsプロパティを使用してテキストを中央揃えにします。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav-link {
display: inline-block;
padding: 0 20px;
text-decoration: none;
}
この方法では、.nav-linkクラスにline-heightプロパティを設定する必要はありません。

gridを使用する方法
親要素に対して、display: gridを使用してgridを作成し、align-itemsプロパティを使用してテキストを中央揃えにします。

.nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
align-items: center;
}

.nav-link {
display: inline-block;
padding: 0 20px;
text-decoration: none;
}
この方法でも、.nav-linkクラスにline-heightプロパティを設定する必要はありません。

いずれの方法を選択しても、.nav-linkクラスにdisplay: inline-blockを設定して、テキストを水平方向に表示する必要があります。また、paddingプロパティを使用して、テキストの左右の余白を設定することもできます。

この回答へのお礼

ChatGPTかなにかですか？
そういうの要らないって

お礼日時：2023/03/08 19:16