Question

我想做的是：

HTML

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

CSS（sass）

footer {
  // ...

  text-align: center;

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

}

简单地将copyrigh拉到父块的底部并将其居中。使用position: absolute非常简单，但是，在子元素上使用display: inline-block并在父元素上使用text-align: center的方法中心将无法正常工作。

是否可以在保持版权相对的同时降低版权？

Answer 1

如果父级的高度已定义或可解析，则Flexbox可以执行此操作。

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>

Answer 2

虽然我同意可以使用flexbox，但它的浏览器支持在IE上并不是很棒（Caniuse）。

我会使用简单的块与文本居中。 JS Fiddle

这是简单的：

footer {
    border: 1px solid #900;
}

footer > .copyright {
    padding: 50px 0 10px;
    text-align: center;
}

如果您确实需要使用内联块，请将其添加到版权CSS：

display: inline-block;
width: 100%;

将div放在父级的底部而不是绝对的

2 个答案: