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

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; 
}