Q&A
該当のhtmlとcssを載せてください。
画像の上に2行以上ある文章を中央に配置させたい
htmlで模写の練習をしているのですが、positionを使った方法でｃｓｓを試したのですがうまく実装できませんでした。
発生している問題・エラーメッセージ
ｈ1タグとｐタグを横に並べて画像の中央に並べたいのだがｈ1の文字だけ中央配置される
ｐタグだけデフォルトの左側に表示されるもしくは重なったりする。
該当のソースコード
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
模写 デイドラからの練習問題から
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>
<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>
</html>
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;
display: block;
}
.copy {
top: 50%;
left: 50%;
display: block;
position: absolute;
transform: translate(-50%,-50%)
}
.copy p {
width: 100%;
display: block;
position: absolute;
transform: translate(-50%,-50%)
}
こんな感じのコードになります。よろしくお願いいたします。
お手数ですが、質問に追記してください。ここですと他の回答者の方に伝わりにくいです。※｢コードの挿入｣で記入ください。
回答1件
0
CSSに下記を追加してはどうでしょうか？
CSS
1p { 2 text-align: center; 3}
※コメント欄に記載のコードに対する最小の追加で済むものを提示しました。
※必要に応じてクラスを追加するなどしてください。
【追記】
質問者さんのやりたいことが見えてきましたので回答を変更します。
１．htmlを一部修正しました。
html
1<div class="container"> 2 <h1 class="copy">1日1題30日で<br>プロのWebエンジニアになろう</h1> 3 <p>毎日設定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身に付きます</p> 4</div>
２．CSSに下記を追加しました。
CSS
1.container p { 2 position: absolute; 3 top: 75%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6}
投稿2021/04/29 01:27
編集2021/04/29 11:24総合スコア10605
text-align: center;をあてたのですが、画像からはみ出してしまいました。
同じ画像が手元にないので再現出来ませんが、画像のサイズはいくつでしょうか？
私の環境で試した限りでは問題ありませんでした。
https://note.com/tokyofreelance/n/n4baf7dd10306
こちらのurlを参照しました。
すいません。画像がすでにフォルダーにあるのに気づかないで進めてました。皆様ありがとうございました。お手数かけました。。。
あなたの回答
tips
プレビュー
