Flexboxを使用してアイテムのコンテンツを縦に並べますか？

Question

私は、次の単純なリストを持っている

...

ul{background:wheat;height:200px;text-align:center;} 
 
li{height:200px;display:inline-block;margin-right:10px;background:green;color:white;}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

私はアイテムの内容が垂直方向に中央揃えするために取得しようとしていますが、フレキシボックスには、これを行うための方法ですか？

Answer 1

はいフレックスボックスはこれに最適です。既存のレイアウトを使用してliにinline-flexを使用し、align-items: centerにコンテンツを垂直方向に合わせることができます。

ul{background:wheat;height:200px;text-align:center;} 
 
li{height:200px;display:inline-flex;margin-right:10px;background:green;color:white;align-items:center;}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

また、単に親の高さへのコンテンツのline-heightを設定することができ、それが縦にコンテンツを中心に説明します。

ul{background:wheat;height:200px;text-align:center;} 
 
li{height:200px;display:inline-block;margin-right:10px;background:green;color:white;line-height:200px;}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

Answer 2

あなたは李の上にパディングを追加することができ

ul{background:wheat;height:200px;text-align:center;} 
 
li{height:200px;padding-top: 100px;display:inline-block;margin-right:10px;background:green;color:white;}

since you directly defined the height of the box I was able to just divide that value in half in order to center the content using padding. If you don't know the difference between padding margin and border. Look into the box model in css. It is one of the most fundamental concepts you will need to grasp to have a good understanding of css. 
 

 
<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>