在彈性項目中垂直和水平居中文本

Question

我試圖跟隨flexbox示例，我的行高不適用於此問題。

文本應該是垂直居中的，但事實並非如此。 它僅保持在水平居中的頂部。

在代碼片段中它似乎工作正常，但只是為了證明這是行為奇怪我會給出我所看到的圖片。

我在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：水平和垂直居中

Answer 2

你錯過了一個“;” 在flex-item中的margin-top之后，這使得行高無效