如何使包含常规文本和链接的 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 会产生相同的结果。

问题是，如果我使用 flexbox 而不是网格来使文本居中，就像这样：

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;

希望这能解决您的问题。

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

How do I center an h4 that includes both regular text and links, without losing the spaces between them?

html

css

centering