文本+按钮之间的换行符在 h1 中不起作用

Question

我正在尝试将按钮移动到文本下方（当前显示“测试？”），但换行符什么也没做。我已经用谷歌搜索了所有我能想到的东西，但找不到任何关于此的信息，因此不胜感激！

按钮的 HTML 和 CSS（如果相关）：

.custom-button,
.custom-button:visited {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

编辑：这也是标题的代码，似乎 display: flex 部分导致了问题，但是如果没有它，我如何垂直居中文本？这对我来说是全新的，所以谢谢你的帮助！

h1 {
    font-size: 62px;
    font-family: "Sofia", sans-serif;
    color: cyan;
    text-align: center;
    vertical-align: middle;
    background-color: grey;
    background-repeat: no-repeat;
    background-position: center;
    margin: -10px;
    height: 110%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

Answer 1

您可以使用常规的 div 代替 h1，如下所示：

<div>
   <div>Test?</div>
   <div><a class="custom-button" href="#scroll">Click Me</a></div>
</div>

因此，默认情况下，div 将表现为换行符（即显示：块）。 此外，您可能还想添加一些额外的样式。

Answer 2

我认为没有必要换行，
您只需将文本包装到

标签

<h1>
   <p>Test?</p>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

Answer 3

这是由display: flex 和justify-content: center 的组合引起的。 Flexbox 通常用于使事物居中，因此如果您不希望它居中，则几乎没有理由使用它。

如果您希望将display: flex 设置在文本下方，只需删除它即可。你也可以删除justify-content和align-items，因为如果你删除display: flex，它们都不会影响任何事情：

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>

或者，如果您希望它们都居中，则需要将弹性规则应用于 两个 元素，以及 flex-direction: column 以确保弹性框是垂直的与水平相反：

.custom-button,
.custom-button:visited {
      padding: 5px 10px;
      border: 2px solid #FFF;
}

.custom-button:hover {
      background: #000;
      color: #FFF;
}

h1, a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<h1>
   Test? <br>
   <a class="custom-button" href="#scroll">Click Me</a>
</h1>