我正在尝试使一个伸缩项目在垂直和水平方向居中。
我想将一些文本固定在flex容器的底部。
margin-top:auto在文本上只是将内部框推到顶部。有想法吗?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>Run Code Online (Sandbox Code Playgroud)
这是codepen。