web-dev-qa-db-ja.com

フレックスボックス内のテキストを垂直方向に合わせる方法は？

私はフレックスボックスを使用して<li>内のいくつかのコンテンツを垂直方向に整列させたいのですが、あまり成功していません。

私はオンラインでチェックしました、そして、チュートリアルの多くは実際に親のflex設定からalign-items:centerを取得するラッパーdivを使います、しかし私はこの追加要素を切り取ることが可能であるかどうか疑問に思います。

リスト項目の高さは動的な％になるため、この場合はフレックスボックスを使用することにしました。

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-self: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>
htmlcsscss3flexbox
287
styler

編集：私の代わりに Michael_Bの答え を使ってください。

可能であればこの回答を削除しますが、承認された回答は削除できません。

flex-directionを（columnを使用して）垂直にすると、justify-content: centerは垂直方向の中央に配置されます。そうすれば、text-align: centerを使って水平方向に中央揃えすることもできます。

li {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

これがcodepenの 実用的なデモです 。

373
Ben Visness

align-self: centerを使用する代わりに、align-items: centerを使用してください。

flex-directionを変更したりtext-alignを使用する必要はありません（ 別の回答 で提案されているように）。

これがすべてうまくいくように、1つの調整を加えたコードです。

ul {
  height: 100%;
}

li {
  display: flex;
  justify-content: center;
  /* align-self: center;    <---- REMOVE */
  align-items: center;   /* <---- NEW    */
  background: silver;
  width: 100%;
  height: 20%; 
}

align-self プロパティはフレックスアイテムに適用されます。親（li）にはdisplay: flexまたはdisplay: inline-flexが適用されていないため、あなたのulはフレックス項目ではありません。

したがって、ulはフレックスコンテナではなく、liはフレックスアイテムではなく、align-selfは効果がありません。

align-items プロパティは、フレックスコンテナに適用されること以外はalign-selfと似ています。

liはflexコンテナなので、align-itemsを使用して子要素を垂直方向に中央揃えできます。

* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  /* align-self: center; */
  align-items: center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>

codepenデモ

技術的には、align-itemsとalign-selfはどのように機能するのか...

（コンテナの）align-itemsプロパティは、（アイテムの）align-selfのデフォルト値を設定します。したがって、align-items: centerは、すべてのフレックスアイテムがalign-self: centerに設定されることを意味します。

しかし、個々のアイテムのalign-selfを調整することでこのデフォルトを上書きすることができます。

たとえば、同じ高さの列が必要な場合、コンテナはalign-items: stretchに設定されます。ただし、1つの項目は一番上に固定する必要があるため、align-self: flex-startに設定されています。

例

テキストはどのようにフレックスアイテムですか？

何人かの人々はどのようにテキストの連続が...

<li>This is the text</li>

liの子要素です。

その理由は、インラインレベル要素で明示的にラップされていないテキストは、インラインボックスでアルゴリズム的にラップされているからです。これはそれを匿名インライン要素と親の子にします。

CSS仕様より

9.2.2.1匿名インラインボックス

ブロックコンテナ要素内に直接含まれるテキストは、匿名インライン要素として扱われる必要があります。

Flexboxの仕様でも同様の動作が可能です。

4.フレックスアイテム

フレックスコンテナの各インフローチャイルドはフレックスアイテムになり、フレックスコンテナ内に直接含まれる連続した各テキストランは、無名のフレックスアイテムにラップされます。

したがって、liのテキストはフレックスアイテムです。

350
Michael_B

将来のGoogle社員のために、

最も投票された回答と2番目に多くの回答も、OPによって投稿されたこの特定の問題を解決するためのものです。しかし、あなたのケースはコンテナの中で垂直方向の通常の要素を中心に置くであるかもしれません。これは私の場合にも当てはまります。

align-self: center;

これは前述のクエリのトップ結果であり、またかなり長い間混​​乱していたので、ここでこれを出すだけです* Derp *

19
Mohd Abdul Mujib

一番良い方法は flexboxをflexboxの中に入れ子にすることです 。あなたがしなければならないのは子供にalign-items: centerを与えることだけです。これは、親の内側でテキストを垂直方向に揃えます。

// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  display: flex;
  align-items: center;
}
9
staypuftman
* {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
ul {
  height: 100%;
}
li {
  display: flex;
  justify-content: center;
  align-items:center;
  background: silver;
  width: 100%;
  height: 20%;
}
<ul>
  <li>This is the text</li>
</ul>
0
Swapnil