CSS の フレックスアイテム内のテキストの位置を変更するには？

CSS で flexbox（フレックスボックス）を利用しています。その中に並べた、フレックスアイテム内のテキストの位置を変更する方法を教えてください。

たとえば、左右中央揃えを実現するには、次の記述で可能です。

flex-item {
text-align: center;
}

上下中央揃えを実現するには、どのような記述が必要でしょうか。

No.4 回答者： Ogre7077 回答日時： 2021/03/06 16:35

交差軸の配置方法を中央に指定します。

https://developer.mozilla.org/ja/docs/Web/CSS/al …

例)
flex-direction: row; ← 交差軸は縦
align-items: center; ← 交差軸の配置方法を中央に

No.3 回答者： t_fumiaki 回答日時： 2021/03/06 16:29

>>改行された場合でも、フレックスアイテム内の垂直中央に揃えたいです。

・改行されない場合（垂直中央に揃う）
■■■■　　　■■■■■　　　■■

・改行された場合（１行目の高さに揃ってしまう）
■■■■　　　■■■■　　　　■■
　　　　　　　■

これって、何かのツールを使って無い？
横並びの区画が3個横に並んいて、その区画内に文字列が有る様にしないと、途中文字だけ改行なんて事不可能。

普通にhtml+cssで組んでれば、チャント中央配置される。

ツールを使ってるのであれば、ツールスペックに依存するから、それはここで聞いても無理。

No.2 回答者： fujillin 回答日時： 2021/03/06 13:56

こんにちは

方法いろいろ。
https://saruwakakun.com/html-css/basic/centering

table-cellにしておくのでもよいかも。

この回答へのお礼

fujillin さん、ご回答ありがとうございます。

　フレックスアイテム内のテキスト要素を上下（垂直）中央揃えにしたいのですが、教えていただいた方法で可能でしょうか。

お礼日時：2021/03/06 14:36

No.1 回答者： t_fumiaki 回答日時： 2021/03/06 13:46

vertical-align:middle;

この回答へのお礼

t_fumiaki さん、早速ご回答ありがとうございます。

フレックスボックスのアイテム内にテキストを入れると、デフォルトで垂直（上下）中央位置に配置されます。

ただし、テキストが改行されたものと、されていないものが混在すると、改行がされたテキストの１行目の高さに、されていないものの高さが揃ってしまうのです。（Mycrosoft Edge バージョン 88.0.705.81 (公式ビルド) (64 ビット)で確認。図参照）

改行された場合でも、フレックスアイテム内の垂直中央に揃えたいです。

・改行されない場合（垂直中央に揃う）
■■■■　　　■■■■■　　　■■

・改行された場合（１行目の高さに揃ってしまう）
■■■■　　　■■■■　　　　■■
　　　　　　　■

お礼日時：2021/03/06 14:35