コーディングについて初心者での質問で…失礼いたします。
①背景画像(cta)の上にボタン画像(botton)を指定の位置に設置したいのですが…どうしてもできません。
背景画像の下に配置されてしまいます。
relative,absoluteを使用するのはわかったのですが…設置されません。
②また全体を中央に配置したいのですが…左端に全体が表示されてしまいます。
HTMLで<body></body>の間に<center></center>を使用して中央揃えにするのは間違っていますか?
初心者でよくわかっていませんが…教えて頂ける方よろしくお願いいたします。
★出来上がりイメージ
★背景画像ーcta
★ボタンーbotton
★HTML
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="cva"> <div class="cta"> <p> <img src="img/cta.jpg"alt> </p> </div> <div class="botton"> <a href="https://www.google.com/"target="_blank"> <p> <img src="img/botton.png"alt> </p> </a> </div> </div> </body> </html>
★style.css
body { width: 100%; background-color: #fff; } .wrapper { max-width: 750px; margin: 0 auto; text-align: center; } .cta { margin-top: -5px; } img { width: 100%; margin: 0; } /*これをrelativeにしないとbuttonがどこを基準にして移動したらいいかわからない*/ .cva { position: relative; } .cva .botton { position:absolute; bottom: 18%; left: 0; right: 0; margin: auto; } .cva .botton img{ max-width: 90%; }

回答1件
あなたの回答
tips
プレビュー