Question

我有一个垂直对齐其父级内部按钮的问题。按钮应与＆＃34; info＆＃34;的底部对齐。 div但是我不能坚持下去。

我不能使用＆＃34;位置：绝对＆＃34;在这种情况下。

我事先并不知道主父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

正如一些评论中提到的，position：absolute是最简单的方法。但是，你说你受这个因素的限制，所以这里有一个使用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;
}

父级底部垂直对齐div

1 个答案: