BETA

要素の中にあるテキストを高さに対して真ん中に表示する場合どうするか

投稿日:2018-11-24
最終更新:2018-11-24

要素内にあるテキストを高さに対して真ん中に表示する

素朴な疑問として要素の中にテキストがあり、そのテキストを要素の高さに対して真ん中に表示する場合、どういった方法が一般的にベストなのかを模索し、パっと思いついた記載してみました。

パディングのトップとボトムを同じ値にする

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.padding {
  padding-top: 20px;
  padding-bottom: 20px;
}

HTML

<div class="btn padding">
    テキスト
</div>

表示1

パディングのトップとボトムを同じ値にした場合、テキストを真ん中に表示。

表示2

フォントサイズが違う場合、同じ要素を横並びにすると高さが揃わない。下記は「display: flex;」で横並びにしています。

行間を指定する

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.line_height {
  line-height: 80px;
}

HTML

<div class="btn line_height">
    テキスト
</div>

表示1

line-heightで指定した値の分だけテキストは真ん中に表示。

表示2

テキストが折り返した場合、行間で指定した値の分だけ高さが膨らむ。

高さと行間を同じ値にする

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.line_height02 {
  height: 80px;
  line-height: 80px;
}

HTML

<div class="btn line_height02">
    テキスト
</div>

表示1

heightとline-heightで指定した値の分だけテキストを真ん中に表示。

表示2

高さ以上にテキストが折り返した場合にはみ出す。

高さを指定してflexboxにする

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.height {
  height: 80px;
  display: flex;
  align-items: center;
}

HTML

<div class="btn height">
    テキスト
</div>

表示1

「display: flex;」と「align-items: center;」でテキストを真ん中に表示。

表示2

高さ以上にテキストが折り返した場合にはみ出す。

最小の高さを指定してflexboxにする

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.min_height {
  min-height: 80px;
  display: flex;
  align-items: center;
}

HTML

<div class="btn min_height">
    テキスト
</div>

表示1

「display: flex;」と「align-items: center;」でテキストを真ん中に表示。

表示2

最小の高さ以上にテキストが折り返す場合に伸びる。

高さを指定してテーブルセルにする

CSS

/* 共通のスタイル */
.btn {
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 個別のスタイル */
.cell {
  height: 80px;
  display: table-cell;
  vertical-align: middle;
}

HTML

<div class="btn cell">
    テキスト
</div>

表示1

「display: table-cell;」と「vertical-align: middle;」でテキストを真ん中に表示。

表示2

セルの高さ以上にテキストが折り返す場合に伸びる。また、セルにするのでマージンプロパティが効かない。

最後に

今回は高さを個別のスタイルに記述しましたが、共通のスタイルに記述し、divなどの要素をさらに追加した場合、絶対配置やtransformでテキストを真ん中に表示することもできます。

表示結果を見ていて感じたことは、テキストが折り返さない場合は高さを完全に決めてしまってもよいですし、折り返す可能性があれば伸びる形にする、といったようにデザインによって実装方法を臨機応変に変えていくのが無難かなと思いました。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

ボヘミアン⚡の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!