質問編集履歴
3
画像添付
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -29,4 +29,7 @@
|
|
|
29
29
|
**width: 100%;**
|
|
30
30
|
color: white;
|
|
31
31
|
}
|
|
32
|
-
```
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
実現したい状態は下記の画像の通りです。
|
|
35
|
+
|
2
コードブロックをファイルごとに分けました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,8 +14,9 @@
|
|
|
14
14
|
</div>
|
|
15
15
|
<p class="txt-contents">うううう</p>
|
|
16
16
|
</div>
|
|
17
|
+
```
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
```ここに言語を入力
|
|
19
20
|
CSS
|
|
20
21
|
.lesson-icon {
|
|
21
22
|
position: relative;
|
1
コード機能をしました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
css position: absoluteでp
|
|
1
|
+
css position: absoluteでp要素をwidth100％指定で中央寄せになる理由を教えて下さい。
|
body
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
教材
|
|
1
|
+
教材習中に疑問に思ったので、質問させて頂きます。
|
|
2
2
|
|
|
3
|
-
下記HTMLコードの、
|
|
3
|
+
下記HTMLコードの、p要素の「HTML & CSS」の文章を同じdiv内（lesson-icon）のimg画像の上でposition: absoluteで上から90px、左右中央寄せの位置に重ねて表示させたい場合、
|
|
4
4
|
教材によると、下記CSSコードのようにwidth: 100%を指定すると、左右中央寄せが実現するようなので実際にやってみた所、その通りになりました…が理由が分りません。
|
|
5
5
|
|
|
6
6
|
何故、width: 100%に指定すると、左右中央寄せになるのでしょうか？
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
```ここに言語を入力
|
|
9
|
-
|
|
9
|
+
HTML
|
|
10
10
|
<div class="lesson">
|
|
11
11
|
<div class="lesson-icon">
|
|
12
12
|
<img src="ああああ" alt="いいいい">
|
|
13
|
-
|
|
13
|
+
<p>HTML & CSS</p>
|
|
14
14
|
</div>
|
|
15
15
|
<p class="txt-contents">うううう</p>
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
CSS
|
|
20
20
|
.lesson-icon {
|
|
21
21
|
position: relative;
|
|
22
22
|
}
|
|
@@ -27,4 +27,5 @@
|
|
|
27
27
|
top: 90px;
|
|
28
28
|
**width: 100%;**
|
|
29
29
|
color: white;
|
|
30
|
-
}
|
|
30
|
+
}
|
|
31
|
+
```
|