为什么我的页脚内的 2 个 div 位于不同的角落？

Question

我在为一项学校作业制作页脚时遇到了这个问题：两个文本应该在同一行，但一个更高，一个更低

我试着在页脚左侧放一个 link，在右侧放一些文字。出于某种原因，当我将 div 拆分到它们的位置时，它们最终会变成这样。 Link 在左上角，文本在右下角。我试图让它们都垂直居中，但我没有做任何事情让它们都在那里。我已经成功地将两者都放在了中心，但从来没有同时出现过。这是怎么回事？

这是我的 html:

<footer>
    <div class="link_class">
        <a href="./" class="link_class">asd</a>
    </div>
    <div class="copy_class">
        <p>&copy; dsa</p>
    </div>
</footer>

这里是 css:

footer{
    width: 20%;
    height: 5%;
    background-color: gray;
    display: flex;
    justify-content: space-between;
}

Answer 1

如果您希望它们在不同的行上，那么

  align-items: center;
  flex-direction: column;

并省略 justify-content

Answer 2

在您的示例中，原因不是 flex 行为。

本机浏览器样式将边距应用于 'p' 标签（margin-block-start：1em；margin-block-end：1em；）但不应用于 'a' 标签。要解决它，您有一些简单的选择：

应用保证金：0 到您的 'p'
将 p 标签更改为另一个没有默认边距的标签。

这里是默认浏览器样式的参考： https://www.w3schools.com/cssref/css_default_values.asp

Answer 3

只需添加这个，使用 flexbox 的神奇力量将它们彼此对齐。

align-items: center;

footer{
    width: 20%;
    height: 5%;
    background-color: gray;
    display: flex;
    align-items: center;
}

<footer>
    <div class="link_class">
        <a href="./" class="link_class">asd</a>
    </div>
    <div class="copy_class">
        <p>&copy; dsa</p>
    </div>
</footer>

为什么我的页脚内的 2 个 div 位于不同的角落？

Why do my 2 divs inside a footer go in different corners?

html

css

css-position