いつもお世話になっております。
件名が大雑把で申し訳ありません。どのように表現するとよいのかわからず、記入しました。
.menu-descriptionの中にmenu-description-innerを作成しました。
その中に、テキストを入力しています。
どうすれば、menu-description-innerを.menu-descriptionの中央に配置できるのか、教えていただきたく質問いたしました。
何卒よろしくお願いいたします。
<section class="menu" id="menu"> <h2 class="heading">MENU</h2> <div class="menu-wrapper"> <div class="menu-box flower01"> <img class="menu-image" src="img/flower01.png" alt="flower01"> <div class="menu-description"> <div class="menu-description-inner"> <h2>flowerr01</h2> <p class="menu-text">〇〇〇〇〇<br>〇〇〇〇〇</p> </div> </div> </div> <div class="menu-box flower02"> <img class="menu-image" src="img/flower02.png" alt="flower02"> <div class="menu-description"> <div class="menu-description-inner"> <h2>flower02</h2> <p class="menu-text">〇〇〇〇〇<br>〇〇〇〇〇</p> </div> </div> </div> <div class="menu-box flower03"> <img class="menu-image" src="img/flower03.png" alt="flower03"> <div class="menu-description"> <div class="menu-description-inner"> <h2>flower03</h2> <p class="menu-text"> 〇〇〇〇〇<br>〇〇〇〇〇</p> </div> </div> </div> <div class="menu-box flower04"> <img class="menu-image" src="img/flower04.png" alt="flower04"> <div class="menu-description"> <div class="menu-description-inner"> <h2>flower04</h2> <p class="menu-text"> 〇〇〇〇〇<br>〇〇〇〇〇</p> </div> </div> </div> </div> </section>
css
1.menu-wrapper { 2 display: table; 3 width: 100%; 4 margin-top: 60px; 5 margin-bottom: 0; 6 table-layout: fixed; 7} 8.menu-box{ 9 position: relative; 10 display: table-cell; 11} 12.menu-image { 13 display: block; 14 width: 100%; 15 margin: 0 0 60%; 16} 17.menu-description { 18 position: absolute; 19 top: 50%; 20 left: 0; 21 z-index: 1; 22 width: 100%; 23 height: 50%; 24 overflow-y: auto; 25} 26.menu-description-inner { 27 display: table-cell; 28 width: 100%; 29 height: 100%; 30 vertical-align: middle; 31 32} 33.menu-text { 34 display: table-cell; 35 vertical-align: middle; 36 font-size: 1.2rem; 37 line-height: 2; 38} 39.menu-box::after{ 40 content: ''; 41 position: absolute; 42 top: 50%; 43 left: 0; 44 width: 100%; 45 height: 50%; 46 background: no-repeat; 47 background-size: 100% 100%; 48 opacity: 0.2; 49} 50.menu-box.flower01::after { 51 background-image: url('/img/flower01.png'); 52} 53.menu-box.flower02::after { 54 background-image: url('/img/flower02.png'); 55} 56.menu-box.flower03::after { 57 background-image: url('/img/flower03.png'); 58} 59.menu-box.flower04::after { 60 background-image: url('/img/flower04.png'); 61}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/11 13:59