画像の上に2行以上ある文章を中央に配置させたい
htmlで模写の練習をしているのですが、positionを使った方法でcssを試したのですがうまく実装できませんでした。
発生している問題・エラーメッセージ
h1タグとpタグを横に並べて画像の中央に並べたいのだがh1の文字だけ中央配置される
pタグだけデフォルトの左側に表示されるもしくは重なったりする。
該当のソースコード
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shotcaticon" href="img/favicon.ico"> <link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/style.css"> </head></html><body> <header> <div class="header-title"><a href="#">30日Daysトライアル</a> </div> <nav> <ul class="header-right"> <li><a href="#">デイドラとは</a></li> <li><a href="#">コース一覧</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <div class="container"> <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1> </div> <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身に付きます</p> <!-- wrapper --> </body>
style.css
@charset "UTF-8";
html {
font-size: 100%;
}
body {
color: black;
}
header {
display: flex;
justify-content: space-between;
}
.header-title {
float: left;
}
.header-right {
display: flex;
float: right;
list-style: none;
margin-right: 20px;
}
.container {
position: relative;
background-image: url(../img/main-vsual-nontitle.png);
background-size: cover;
height: 300px;
}
.copy {
top: 50%;
left: 50%;
display: block;
position: absolute;
transform: translate(-50%,-50%)
}
.copy p {
top: 50%;
left: 50%;
display: block;
position: absolute;
transform: translate(-50%,-50%)
}
ソースコード
試したこと
サルワカのページを見ていろいろ試した
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
模写 デイドラからの練習問題から