父项的底部垂直对齐div

Question

我在其父项内部垂直对齐按钮时遇到问题。 该按钮应与“ info” div的底部对齐，但无法粘住。

在这种情况下，我不能使用“ position：absolute”。

而且我事先不知道主要父母div的高度。

HTML：

<div class="container">
  <a href="#"><img src="http://placekitten.com/g/200/400" alt="" /></a>
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem tenetur temporibus voluptas repellendus.</p>
    <button>Button</button>
  </div>
</div>

CSS：

* { box-sizing: border-box; }

.container {
  width: 200px;
  height: 700px; /* The height is variable!!! */
  background: #ccc;
  padding: 1em;
  overflow: hidden;
}

a { display: block; height: 50%; }
a img { display: block; width: 100%; max-width: 100%; }

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
}

.info p {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: #a0f;
  margin: 0;
}

.info button {
  display: inline-block;
  vertical-align: bottom;
}

Answer 1

如某些评论中所提到的，位置：绝对是最简单的方法。 但是，您说您受此因素限制，因此这是使用flexbox的替代方法！

您需要在父元素上看到三个属性：display，flex-direction和justify-content。 然后在子元素上放置一个边距，以确保其在底部居中。 这是更新的小提琴。 不需要绝对位置：） https://jsfiddle.net/jg8egtb1/

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info button {
  margin: 0 auto;
}