フレックスアイテムで縦と横にテキストをセンタリングする

Question

フレックスボックスの例に従うようにしていましたが、この問題に対してラインハイトが機能していません。

テキストは垂直方向にセンタリングする必要がありますが、そうではありません。それは上部のみが水平に中央に置かれたままです。

コードスニペットではうまく機能しているようですが、これが奇妙なことを証明するために、私が見ているものの写真を与えます。

私はChromeとIEの両方でこれをテストしましたが、垂直にセンタリングしていません。

スニペットのサイズを変更しましたが、それはできません。

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-top: 10px line-height: 50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

Answer 1

垂直方向と水平方向にそれぞれフレックス項目内のテキストを中央揃え、あなたのコードにこの調整を行います。

.flex-container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.flex-item { 
 
    display: flex;    /* create nested flex container */ 
 
    justify-content: center;  /* center text horizontally */ 
 
    align-items: center;   /* center text vertically */ 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

詳しくはFlexbox: center horizontally and vertically

Answer 2

あなたは ";"行の高さが