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

我得到了一个codepen我一直在努力，但似乎无法得到正确的位置一个在另一个下面的报价。正如你在这里看到的，作者被放置在同一个网格单元的一侧。 https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100 HTML5：HTML/CSS网格布局文本元素的位置

<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; 
     }

有没有什么办法可以让文本流下来，而不是横盘？在此先感谢您的任何建议！

来源

2017-07-29 Angel

望着codepen，我不知道我理解这个问题。你介意扩大你对这个问题的描述吗？这是什么意思... '有没有什么办法可以让文字流下来而不是侧身？' –

对不起，我更新了codepen并解决了第一个问题的答案，不过谢谢你的帮助！ – Angel

删除display: flex;从CSS和下一个<p>将被放置在以前的一个以下。

来源

2017-07-29 13:34:30 Allman

添加属性“弯曲方向”并将其设置为列：

.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; 
}

来源

2017-07-30 01:07:38 jvitoroc

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

回答

相关问题