position: absolteの位置関係について

positionを使って画像の上に文字を中央に配置したい
親要素にposition: relative;を指定しているが、文字が真ん中に配置されないため、レイアウトにずれが生じる
原因を教えて頂きたいです。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>Progate上級</title>
9  <link rel="stylesheet" href="css/style.css">
10  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11</head>
12<body>
13  <header>
14    <img src="image/main_logo.png" alt="ロゴ画像">
15    <div class="header-list">
16      <ul>
17        <li><a href="#">レッスン</a></li>
18        <li><a href="#">新規登録</a></li>
19        <li><a href="#">ログイン</a></li>
20      </ul>
21    </div>
22  </header>
23  <div class="top-wrapper">
24    <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
25    <p class="description">Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
26    <div class="btn-wrapper">
27      <a class="button1" href="#">新規登録はこちら</a>
28      <p class="or">or</p>
29      <a class="button2" href="#"><i class="fab fa-facebook" aria-hidden="true"></i>Facebookで登録</a>
30      <a class="button3" href="#"><i class="fab fa-twitter" aria-hidden="true"></i>Twitterで登録</a>
31    </div>
32  </div>
33  <div class="lesson-wrapper">
34    <div class="container">
35      <h1>Learn Where to Get Started!</h1>
36
37      <div class="lesson">
38        <div class="lesson-icon">
39          <img src="image/html.png" alt="html">
40          <p>HTML&CSS</p>
41        </div>
42        <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
43      </div>
44
45      <div class="lesson">
46        <div class="lesson-icon">
47          <img src="image/jQuery.png" alt="jQuery">
48          <p>jQuery</p>
49        </div>
50        <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
51      </div>
52
53      <div class="lesson">
54        <div class="lesson-icon">
55          <img src="image/php.png" alt="php">
56          <p>php</p>
57        </div>
58        <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
59      </div>
60
61      <div class="lesson">
62        <div class="lesson-icon">
63          <img src="image/ruby.png" alt="ruby">
64          <p>ruby</p>
65        </div>
66        <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
67      </div>
68    
69    </div>
70  </div>
71  <div class="contact-wrapper"></div>
72  <footer></footer>
73</body>
74</html>

css
1
2@charset "utf-8";
3
4/*
5html5doctor.com Reset Stylesheet
6v1.6.1
7Last Updated: 2010-09-17
8Author: Richard Clark - http://richclarkdesign.com
9Twitter: @rich_clark
10*/
11
12html, body, div, span, object, iframe,
13h1, h2, h3, h4, h5, h6, p, blockquote, pre,
14abbr, address, cite, code,
15del, dfn, em, img, ins, kbd, q, samp,
16small, strong, sub, sup, var,
17b, i,
18dl, dt, dd, ol, ul, li,
19fieldset, form, label, legend,
20table, caption, tbody, tfoot, thead, tr, th, td,
21article, aside, canvas, details, figcaption, figure,
22footer, header, hgroup, menu, nav, section, summary,
23time, mark, audio, video {
24    margin:0;
25    padding:0;
26    border:0;
27    outline:0;
28    font-size:100%;
29    vertical-align:baseline;
30    background:transparent;
31}
32
33body {
34    line-height:1;
35}
36
37article,aside,details,figcaption,figure,
38footer,header,hgroup,menu,nav,section {
39    display:block;
40}
41
42nav ul {
43    list-style:none;
44}
45
46blockquote, q {
47    quotes:none;
48}
49
50blockquote:before, blockquote:after,
51q:before, q:after {
52    content:'';
53    content:none;
54}
55
56a {
57    margin:0;
58    padding:0;
59    font-size:100%;
60    vertical-align:baseline;
61    background:transparent;
62}
63
64/* change colours to suit your needs */
65ins {
66    background-color:#ff9;
67    color:#000;
68    text-decoration:none;
69}
70
71/* change colours to suit your needs */
72mark {
73    background-color:#ff9;
74    color:#000;
75    font-style:italic;
76    font-weight:bold;
77}
78
79del {
80    text-decoration: line-through;
81}
82
83abbr[title], dfn[title] {
84    border-bottom:1px dotted;
85    cursor:help;
86}
87
88table {
89    border-collapse:collapse;
90    border-spacing:0;
91}
92
93/* change border colour to suit your needs */
94hr {
95    display:block;
96    height:1px;
97    border:0;  
98    border-top:1px solid #cccccc;
99    margin:1em 0;
100    padding:0;
101}
102
103input, select {
104    vertical-align:middle;
105}
106
107body {
108  margin: 0;
109  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
110}
111
112header {
113  height: 60px;
114  background-color: #223134;
115  position: fixed;
116  z-index: 10;
117  width: 100%;
118  opacity: 0.9;
119  top: 0;
120}
121header img {
122  width: 122px;
123  padding-top: 16px;
124  padding-left: 15px;
125}
126.header-list {
127  float: right;
128}
129.header-list li {
130  float: left;
131  list-style: none;
132}
133.header-list a {
134  line-height: 60px;
135  padding: 0 32px;
136  text-decoration: none;
137  color: #fff;
138  display: block;
139}
140.header-list a:hover {
141  background-color: rgba(255,255,255,0.3);
142}
143
144
145
146.top-wrapper {
147  background-image: url(../image/top.png);
148  background-repeat: no-repeat;
149  height: 702px;
150  background-size: cover;
151  text-align: center;
152  line-height: 1.5;
153}
154.top-wrapper h1 {
155  color: #fff;
156  font-size: 45px;
157  letter-spacing: 5px;
158  padding-top: 225px;
159  opacity: 0.7;
160}
161.description {
162  font-size: 16px;
163  color: #fff;
164  padding-top: 52px;
165  padding-bottom: 45px;
166  opacity: 0.7;
167}
168.btn-wrapper a:hover {
169  opacity: 1;
170}
171.btn-wrapper a {
172  padding: 8px 24px;
173  text-decoration: none;
174  color: #fff;
175  border-radius: 5px;
176  font-size: 16px;
177  opacity: 0.8;
178}
179.button1 {
180  background-color: #239b76;
181}
182.button2 {
183  background-color: #3b5998;
184  margin-right: 15px;
185}
186.button3 {
187  background-color: #55acee;
188}
189.fab {
190  padding-right: 5px;
191}
192.btn-wrapper p {
193  color: #fff;
194  padding-top: 24px;
195  padding-bottom: 26px;
196}
197
198.lesson-wrapper {
199  height: 582px;
200  background-color: #ffffff;
201}
202.container {
203  width: 1260px;
204  margin: 0 auto;
205  margin-bottom: 50px;
206}
207.lesson-wrapper h1 {
208  text-align: center;
209  padding-top: 110px;
210  padding-bottom: 85px;
211  font-size: 24px;
212  font-weight: normal;
213  color: #5f5d60;
214}
215.lesson {
216  width: 25%;
217  float: left;
218}
219.lesson-icon {
220  position: relative;
221}
222.lesson-icon p {
223  position: absolute;
224  top: 50%;
225  color: white;
226}
227.text-contents {
228  width: 84%;
229  font-size: 13px;
230  color: #b3aeb5;
231  margin-top: 15px;
232}

自分で調べたことや試したこと

コードの打ち間違い

使っているツールのバージョンなど補足情報

visual studio code

m.ts10806

2021/02/15 22:27

実際のコード以外は除いてください。質問を見て回答者がすることは「コードをコピペで確認」です。マークダウンのcode機能を使用するとボタン押すだけでそのエリアが全コピーされるのでわざわざ選択状態にしてコピーはしません。

退会済みユーザー

2021/02/15 22:45

質問している内容だけ載せてくれということでしょうか？実際のコード以外というのがよく分からないのですが。

m.ts10806

2021/02/15 22:52

HTML css という文言も実コードに入ってるのですか？

m.ts10806

2021/02/15 23:01 編集

「言語名」としてマークダウンに認識させたいのでしたら ``` html ↑こうではなく ↓こう ```html ヘルプページも参考に。

退会済みユーザー

2021/02/15 23:02

すいませんでした気を付けます

maisumakun

2021/02/15 23:07

> HTMLとCSSがコードに入ってないことぐらい見ればわかると思いますけどそれが通じないのがここの質問です。「本当にこう書いたの？」という質問者に遭遇することも稀ではありません。

m.ts10806

2021/02/16 00:14

いますよ。「本当にそう書いた」って人。赤の他人ですから書かれてることが全てです。それに「コピペしてきたコードを削る」もしくは「コード部分と思わしき部分を選択する」という対応を回答者が手動でしなければならない時点で、再現確認になりません。

行動規範の内容に同意します

回答2件

ベストアンサー

lessonにtext-align: center;をいれる

投稿2021/02/15 23:49

退会済みユーザー

総合スコア0

css
1.text-contents {
2  margin-left: auto;↲
3  margin-right: auto;↲
4  width: 84%;↲
5  font-size: 13px;↲
6  color: #b3aeb5;↲
7  margin-top: 15px;↲
8}↲
9