刚刚找到我的问题的解决方案,因为我会在这里问它。
所以我想我可以和你分享。
我需要使用居中内容分发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
标记。但是,我想知道如何让他们的文本居中。
答案 0 :(得分:1)
好吧,我的想法是将每个子项目变成一个弹性框。然后,我们将能够轻松集中他们的内容。
新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;
}