###前提・実現したいこと
レスポンシブ対応で画像の上に文字を表示させ、文字を中央揃えにしたい
###該当のソースコード
html
1<section class="conA"> 2 <div class="container"> 3 <ul> 4 <li> 5 <p>Menu</p> 6 <a href=""><img src="img/menu-bnr.jpg" alt="menu" width="310" height="145"></a> 7 </li> 8 <li> 9 <p>Salon info</p> 10 <a href=""><img src="img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a> 11 </li> 12 <li class="sm"> 13 <p class="smp">Access</p> 14 <a href=""><img src="img/access-bnr.jpg" alt="access" width="310" height="145"></a> 15 </li> 16 </ul> 17 </div> 18</section>
CSS
1.conA .container { 2 width: auto; 3} 4.conA ul { 5 display: flex; 6 flex-wrap: wrap; 7 text-align: center; 8} 9.conA ul li { 10 flex: 1 1 50%; 11 margin: 0 auto; 12 width: 100%; 13 position: relative; 14} 15.conA p { 16 display: inline-block; 17 position:absolute; 18 top:40%; 19 left:45%; 20 text-align: center; 21} 22.conA li img { 23 width: 100%; 24 height: auto; 25} 26.conA .sm img { 27 width: 50%; 28 height: auto 29}
###試したこと
親要素をposition: relative;
をかけ子要素にposition:absolute;
として位置を指定したのですがうまく行きません。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/24 14:19