使用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> 

我試圖讓項目內容垂直居中，是flexbox的方式嗎？

Answer 1

是的flexbox非常適合這個。 您可以使用現有布局，只需在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

您可以在li的頂部添加填充

 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>