2017-07-29 12 views
1

私は作業しているコードペンを持っていますが、カントは正しく配置されていないようです。 ここからわかるように、著者は同じグリッドセルの側面に配置されます。 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; 
     } 

私は、テキストではなく横向きの流下さ得ることができる方法はありますか? 事前にアドバイスをありがとうございます!

+0

を、私は私が問題を理解していません。問題の説明を拡大してもよろしいですか?これはどういう意味ですか... '横に動かす代わりにテキストを流すことはできますか? ' –

+0

申し訳ありませんが、私はcodepenを更新し、最初の回答で問題を解決しましたが、とにかく助けてくれてありがとうございます! – Angel

答えて

1

display: flex;をcssから削除し、次の<p>を前のものの下に置きます。

0

は「フレックス方向」プロパティを追加し、列に設定します。codepenを見て

.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; 
} 
関連する問題