如何将包含常规文本和链接的 h4 居中，而不会丢失它们之间的空格？

Question

我有这个<h4> 标签：

<h4>
    A <a href="https://openjdk.java.net/">Java</a> and <a href="https://kotl.in">Kotlin</a> coder.
</h4>

应用了这个 CSS（继承自 body）：

body {
    font-family: jetbrains-mono;
    background-color: #444;
    color: #EEEEEE;
    font-size: 18px;
    max-width: 650px;
    line-height: 1.2;
    display: grid;
    align-items: center;
    margin: auto auto;
}

结果如下：

仅使用 align-content: center 会产生相同的结果。

问题是，如果我使用弹性框而不是网格来使文本居中，如下所示：

display: flex;
align-items: center;
justify-content: center;

这就是发生的事情：

我该如何解决这个问题？ 完整的 html 文件在这里：https://github.com/TheOnlyTails/theonlytails.com/blob/main/index.html 完整的 css 文件在这里：https://github.com/TheOnlyTails/theonlytails.com/blob/main/style.css

Answer 1

要使其成为一列，您需要flex-direction: column; 属性。将其添加到您添加 display: flex 属性的容器中，如下所示：

   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;

我希望这能解决您的问题。