Question

我试图让一个弹性项目垂直和水平居中。

我希望将某些文本固定到Flex容器的底部。

文本上的

margin-top:auto只是将内盒推到顶部。想法？

＆＃13;

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

＆＃13;

<div class="container">
  <div class="box"></div>
  <span>Text</span>
</div>

＆＃13;

这里是codepen。

Answer 1

请尝试以下方法：

.box  {
    background:goldenrod;
    height: 30px;
    width: 30px;
    margin: auto;
  }

Answer 2

这是一种方法。

将position: relative添加到您的.container CSS规则中，然后使用.box上的绝对定位将span定位到父容器的底部。

您可以通过允许.box具有100％宽度然后使用text-align: center来使文本居中。

＆＃13;

.container {
  background: lightblue;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  position: relative;
}
.box {
  background: goldenrod;
  height: 30px;
  width: 30px;
}
span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <span>Text</span>
</div>

＆＃13;

Answer 3

由于flexbox对齐涉及容器中自由空间的分布，margin-top: auto在这种情况下不起作用，因为另一方没有配重。

因此，一种使盒子居中并使文本底部对齐的方法包括创建文本元素的副本并将其放置在盒子的另一侧。这将创造一个配重。

两端平衡均衡，弹性对齐属性（包括auto边距）可以正常工作。

在这种情况下，即使justify-content: space-between也可以。

当然，您需要将visibility: hidden应用于重复元素。

＆＃13;

.container {
  background: lightblue;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.box {
  background: goldenrod;
  height: 30px;
  width: 30px;
  margin: auto 0;   /* or instead use justify-content: space-between on .container */
}
span:first-child {
  visibility: hidden;
}

＆＃13;

<div class="container">
  <span>Text</span>
  <div class="box"></div>
  <span>Text</span>
</div>

＆＃13;

OR，而不是重复元素，使用伪元素。

较少侵入性且语义更正确的方法将使用伪元素作为副本。但是，要使此方法起作用，您需要知道实际元素的高度，因为您需要精确匹配它。

这样的事情可以创造平衡：

.container::before {
    content: "";
    height: 15px; /* must match actual element's height */
}

＆＃13;

.container {
  background: lightblue;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.box {
  background: goldenrod;
  height: 30px;
  width: 30px;
}
span {
  height: 15px;
}
.container::before {
  content: "";
  height: 15px;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <span>Text</span>
</div>

＆＃13;

将一个弹性项目居中，然后底部对齐另一个

3 个答案: