以下画像の上部のように
画像の中央に文字とボタンを重ねたいのですが、
なかなかセンタリングできません。
どうすれば画像の上、
中心に文字、ボタンをセンタリングできますでしょうか?
よろしくお願いします。
HTML
1 2 <figure class="head"> 3 <img src="img.jpg"> 4 <figcaption class= "absolute"> 5 <h1> 6 <p>COPYCOPYCOPYCOPY(h1)</p> 7 </h1> 8 9 <br> 10 <a class="btn" href="#">BUTTON</a> 11 <br> 12 13 </figcaption> 14 </figure> 15
CSS
1.img img { 2 display: block; 3 margin: 0 auto; 4 width:640px; 5 } 6 7.imgtxt h1{ 8 position: absolute; 9 text-align:center; 10 color: #fff; 11 } 12 13.btn { 14 border: 5px solid #FFF; 15 color: #FFF; 16 padding:10px 40px; 17 width: 300px; 18 text-decoration: none; 19 margin: 0 auto; 20 } 21
.img や .imgtxt に該当する要素がないと思うのですが、これはただの書き間違いですか? 実際のコードはきちんと書かれてますか?
回答4件
あなたの回答
tips
プレビュー