No.1
- 回答日時:
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プロパティを使用して、テキストの左右の余白を設定することもできます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- その他(IT・Webサービス) Yahooの地図の文字サイズ、googleの地図の画面分割 1 2022/05/21 12:31
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- Word(ワード) ワードでメニュー表を作っています。 1番上の「メニュー」の文字を枠で囲っているのですが、この枠をもう 3 2023/01/23 14:55
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- Visual Basic(VBA) VBA 画面上のカーソルに文字数字を入力するコードを教えて下さい 1 2022/10/30 10:31
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- Word(ワード) Word 段落罫線の上下のスペースを広げるには 3 2023/08/04 10:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
border-style:solidで文字がずれる
-
widthやheightの数値に単位(px...
-
インラインフレーム内の表示位...
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
Media Queries 4 で 非推奨とな...
-
CSS テキストフィールドの文字...
-
余分な縦スクロールバーが出て...
-
div要素の左寄せ、中央寄せ、右...
-
スタイルシートで背景の繰り返...
-
safariだけ、cssが効きません!
-
CSS3で角丸写真にシャドーを付...
-
CSSで3分割した背景画像を配置...
-
マウスオーバー時に画像と一緒...
-
初心者html・CSS ウィンドウを...
-
スクロールボックスを中央に配...
-
ライトボックスでスクロールバー
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報