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>将放在上一个assetic: debug: '%kernel.debug%' use_controller: '%kernel.debug%' filters: cssrewrite: ~ scssphp: formatter: 'Leafo\ScssPhp\Formatter\Compressed' assets: particles_css: inputs: - '%kernel.root_dir%/../web/library/particles.js/particles.css' particles_js: inputs: - '%kernel.root_dir%/../web/library/particles.js/library.js' - '%kernel.root_dir%/../web/library/particles.js/run.js'下方。

Answer 2

添加属性＆＃39; flex-direction＆＃39;并将其设置为列：

.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网格布局文本元素位置

2 个答案: