将div放在父对象的底部而不是绝对的 [英] Put div to the bottom of parent without absolute

问题描述

我想要做的是：

HTML

<footer>
   <!-- ... -->
   <span class="copyright">abc</span>
</footer>

CSS（sass）

footer {
  // ...

  text-align: center;

    > .copyright {
        position: absolute;
        bottom: 0;
        display: inline-block;
    }       

}

到父块的底部并居中。使用 position：absolute 很容易，但是，使用 display：inline-block 并且父元素上的 text-align：center 不会工作。

So simply to pull the copyrigh down to the bottom of the parent block and center it. It's pretty easy using position: absolute, however, the centering the way using display: inline-block on the child element and text-align: center on the parent element wouldn't work then.

是否可以保留版权？

推荐答案

如果父级的高度已定义或可解析，Flexbox可以这样做。

Flexbox can do that if the height of the parent is defined or resolvable.

完成 Codepen演示

Complete Codepen Demo

footer {
  height: 150px;
  width: 80%;
  margin: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}
header {
  background: plum;
}
.copyright {
  margin-top: auto;
  /* push to bottom */
  background: red;
  align-self: flex-start;
  /* collapse to own width */
  margin-left: auto;
  /* centering */
  margin-right: auto;
}

<footer>
  <header>I'm a header</header>

  <span class="copyright">Copyright</span>
</footer>

这篇关于将div放在父对象的底部而不是绝对的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！