質問編集履歴

3

画像添付

2019/07/23 13:02

投稿

y.o-teratail
y.o-teratail

スコア17

test CHANGED
File without changes
test CHANGED
@@ -61,3 +61,9 @@
61
61
  }
62
62
 
63
63
  ```
64
+
65
+
66
+
67
+ 実現したい状態は下記の画像の通りです。
68
+
69
+ ![実現画像](d78fa4e99af02f9def4de6bd95f1890d.png)

2

コードブロックをファイルごとに分けました。

2019/07/23 13:02

投稿

y.o-teratail
y.o-teratail

スコア17

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,11 @@
30
30
 
31
31
  </div>
32
32
 
33
+ ```
33
34
 
34
35
 
35
36
 
37
+ ```ここに言語を入力
36
38
 
37
39
  CSS
38
40
 

1

コード機能をしました。

2019/07/23 12:54

投稿

y.o-teratail
y.o-teratail

スコア17

test CHANGED
@@ -1 +1 @@
1
- css position: absoluteでpタグをwidth100%指定で中央寄せになる理由を教えて下さい。
1
+ css position: absoluteでp要素をwidth100%指定で中央寄せになる理由を教えて下さい。
test CHANGED
@@ -1,8 +1,8 @@
1
- 教材習中に疑問に思ったので、質問させて頂きます。
1
+ 教材習中に疑問に思ったので、質問させて頂きます。
2
2
 
3
3
 
4
4
 
5
- 下記HTMLコードの、太字部分のp要素の文章を同じdiv内(lesson-icon)のimg画像の上でposition: absoluteで上から90px、左右中央寄せの位置に重ねて表示させたい場合、
5
+ 下記HTMLコードの、p要素の「HTML & CSS」の文章を同じdiv内(lesson-icon)のimg画像の上でposition: absoluteで上から90px、左右中央寄せの位置に重ねて表示させたい場合、
6
6
 
7
7
  教材によると、下記CSSコードのようにwidth: 100%を指定すると、左右中央寄せが実現するようなので実際にやってみた所、その通りになりました…が理由が分りません。
8
8
 
@@ -12,9 +12,9 @@
12
12
 
13
13
 
14
14
 
15
+ ```ここに言語を入力
15
16
 
16
-
17
- ### HTML
17
+ HTML
18
18
 
19
19
  <div class="lesson">
20
20
 
@@ -22,7 +22,7 @@
22
22
 
23
23
  <img src="ああああ" alt="いいいい">
24
24
 
25
- **<p>HTML & CSS</p>**
25
+ <p>HTML & CSS</p>
26
26
 
27
27
  </div>
28
28
 
@@ -34,7 +34,7 @@
34
34
 
35
35
 
36
36
 
37
- ### CSS
37
+ CSS
38
38
 
39
39
  .lesson-icon {
40
40
 
@@ -57,3 +57,5 @@
57
57
  color: white;
58
58
 
59
59
  }
60
+
61
+ ```