HTML
1 <body> 2 <div class="wrapper"> 3 <header> 4 <div> 5 <h2 class="font-weight-lighter pt-3 pb-3">Enjoy Your Dinner</h2> 6 </div> 7 </header> 8 <div class="container message"> 9 <h2 class="top_message">Enjoy Your Dinner</h2> 10 <p class="mb-5 bottom_message">Feel Like You Are In Italy in NYC</p> 11 </div> 12 </div> 13 </body>
CSS
1.wrapper { 2 position: relative; 3 width: 100%; 4 height: 100%; 5} 6 7.message { 8 position: absolute; 9 top: 0; 10 right: 0; 11 bottom: 0; 12 left: 0; 13 margin: auto; 14 max-width: 490px; 15} 16 17.top_message { 18 margin: auto; 19 text-align: center; 20 margin: 0 auto; 21 color: #fff; 22 padding: 10px 0; 23 border-top: solid 1px #fff; 24 border-bottom: solid 1px #fff; 25} 26 27 28.bottom_message { 29 text-align: center; 30 margin: 0 auto; 31 color: #fff; 32 font-size: 20px; 33 letter-spacing: 5px; 34} 35
wrapperクラスを基準にmessageクラスを上下左右中央寄せしたいのですがなかなかうまくいきません。 display: flex; justify-content: center; align-items: center; なども試しましたが、ダメでした。他に方法はあるでしょうか? よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/17 16:54