小编low*_*lly的帖子

将一个弹性项目居中,将另一个弹性项目底部对齐

我正在尝试使一个伸缩项目在垂直和水平方向居中。

我想将一些文本固定在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

html css css3 flexbox

4
推荐指数
1
解决办法
2652
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1