如何在柔性盒中垂直放置文本？

Question

刚发现我的问题的解决方案，因为我要在这里问它。

所以我想我可以与你分享这个。

我需要散布verticaly三个项目，居中内容。

HTML：

<div id="container"> 
    <a id="item1">Item 1</a> 
    <a id="item2">Item 2</a> 
    <a id="item3">Item 3</a> 
</div> 

CSS：

#container{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    text-align:center; 
    display:flex; 
    flex-direction:column; 
} 
#container a{ 
    flex:1; 
} 
#container a:nth-child(odd){ 
    background:rgba(0,0,0,.2); /* Just for visibility purpose */ 
} 

有了这个代码，Flex上下文是创建于a标签可用垂直空间之间分配。但是，我想知道如何让他们的文字居中。

Answer 1

那么，这个想法是把每个子项目变成一个flexbox。然后，我们可以轻松地将他们的内容居中。

新的CSS：

#container{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    /* text-align:center; <-- This is now unappropriate */ 
    display:flex; 
    flex-direction:column; 
} 
#container a{ 
    flex:1; 

    /* This was added:  */ 
     display:flex; 
     align-items: center; 
     justify-content: center; 
}