HTML/CSS 网格布局文本元素位置

Question

我有一个我一直在研究的代码笔，但似乎无法将引用正确地放在另一个下面。正如您在此处看到的那样，作者被放置在同一个网格单元格的一侧。 https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100 html5:

    <blockquote class="phrase">
      <p style="font-size: 3vh">"The monotony and solitude of a quiet life<br> stimulates the creative mind"</p>
      <p>- Albert Einstein -</p>
    </blockquote><!-- End of quote -->

CSS:

    .phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      }

有什么方法可以让文字向下流动而不是横向流动？在此先感谢您的任何建议！

Answer 1

从 css 中删除 display: flex;，下一个 <p> 将放在前一个的下方。

Answer 2

添加属性 'flex-direction' 并将其设置为列：

.phrase {
      grid-area: phrase;
      display: flex;
      justify-content: center;
      text-align: center;
      font-family: Cardo, serif, Arial;
      font-size: 1.5vh;
      color: #00264d;
      flex-direction: column;
}

HTML/CSS 网格布局文本元素位置

HTML/CSS grid layout text elements position

css

flexbox

css-grid