Question

我希望我的版权浮动到左侧，并且返回顶部按钮浮动到右侧，但我无法将它们水平对齐/居中。我试过做display：inline-block

.wrap {
  max-width: 700px;
  width: 100%;
  padding: 3%;
  position: relative;
}
footer {
  background-color: #ecf0f1;
  clear: both;
  width: 100%;
  vertical-align: middle;
  position: relative;
  float: left;
  height: 20vh;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.backtotop {
  float: right;
}
.copyright {
  float: left;
}

<footer>
  <div class="wrap">
    <a class="backtotop" href="#header">
      BACK TO TOP <span class="arrow">↑</span>
    </a>
    <p class="copyright">ALL RIGHTS RESERVED</p>
  </div>
</footer>

Answer 1

您需要将flx属性扩展到.wrap元素。然后你可以完全移除浮子。

＆＃13;

.wrap {
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
}
footer {
  background-color: #ecf0f1;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 3em
}
p {
  margin: 0;
}
a {
  text-decoration: none;
}

＆＃13;

<footer>
  <div class="wrap">
    <a class="backtotop" href="#header">BACK TO TOP <span class="arrow">↑</span></a>
    <p class="copyright">ALL RIGHTS RESERVED</p>
  </div>
</footer>

＆＃13;

Answer 2

你的<p>但你的<a>没有保证金，如果从两者中删除它，或者将它添加到两者，你将实现你想要实现的目标。

（值得注意的是，虽然您没有自己添加边距，但默认情况下浏览器用户代理会添加边框，除非您另行指定。不同的浏览器设置不同的默认CSS规则。尝试包含reset.css或normalize .css）

如何水平对齐浮动的内容

2 个答案: