CSSのline-heightでテキストの上下を中央揃えする方法!

CSSのline-heightプロパティでテキストを上下中央揃えする方法を解説します。今回紹介するのはline-heightプロパティの基本的な使用法となりますので、line-heightプロパティで中央揃えする方法をしっかりとマスターしましょう。

コンテンツ [表示]

  1. 1CSSのline-heightでテキストの上下を中央揃えする方法
  2. 1.1注意点

今回はCSSのline-heightプロパティを用いてテキストを上下中央揃えする方法を解説します。

line-heightプロパティを用いると、テキストの高さを含めた高さを指定できるためメニューなどでとても便利に使うことができます。

CSSのline-heightでテキストの上下を中央揃えする方法

line-heightプロパティの使い方はとてもシンプルです。以下のように記述します。

line-heightプロパティ

.class{
  line-height: 高さ;
}

またtext-alignプロパティを併用することで左右上下真ん中にすることもできます。

注意点

ここで注意点が2つあります。

まずインライン要素にはスタイルが効かないこと。

1行ではなく複数の行になる場合、スタイルが崩れてしまう事です。

これらを以下のサンプルコードにまとめましたので、ご覧ください。

上記の状態を避けつつ、上手く上下左右中央揃えしていきましょう。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。