テキストの上下方向の中央揃え

Question

前提・実現したいこと

フレックスボックスを使ってテキストを上下左右に中央揃えしたいのですが、縦方向だけうまく中央揃えできないので、教えていただきたいです。

発生している問題・エラーメッセージ

子要素が縦方向の中央に配置されない。

該当のソースコード

<div class="flexbox">
    <div class="box-item">item1</div>
    <div class="box-item">item2</div>
    <div class="box-item">item3 </div>
  </div>

.flexbox {
  display: flex;
}
.box-item {
  margin-right: 10px;
  border: 2px solid lightblue;
  width: 100px;
  height: 100px;
  text-align: center;
}

試したこと

vertical-align: middle;やalign-items: center;を試したが、縦方向にテキストは配置されなかった。

Answer 1

.box-item内のテキストを中央寄せしたいのなら、.box-itemにflexを設定します。

.flexbox {
  display: flex;
}
.box-item {
  margin-right: 10px;
  border: 2px solid lightblue;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content:center;
  align-items: center;
}

Comments

[utah]

ありがとうございます！
ボックス内でテキストが上下中央揃えさらました。
.box-itemに対してdisplay:flexを使う理由を教えていただいてもよろしいでしょうか？

[hatena19]

display:flex は子要素に対してレイアウトを設定するものです。ボックス内のテキストコンテンツも.box-itemから見れば子要素です。

[utah]

すいません、返信おくれました。
そういうことですか。ありがとうございます。