回答編集履歴
3
コードの微修正
test
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
#sample .text {
|
|
66
66
|
|
|
67
|
-
margin: 30px;
|
|
67
|
+
margin: 30px 0;
|
|
68
68
|
|
|
69
69
|
text-align: center;
|
|
70
70
|
|
2
コードの追記
test
CHANGED
|
@@ -22,6 +22,54 @@
|
|
|
22
22
|
|
|
23
23
|
そして質問内容である画像の中央寄せですが、ブロック要素の左右の中央寄せであれば`margin`プロパティの`right`と`left`の値を`auto`にするというのがポピュラーな方法です。
|
|
24
24
|
|
|
25
|
+
```HTML
|
|
26
|
+
|
|
27
|
+
<div id="sample">
|
|
28
|
+
|
|
29
|
+
<img src="test.jpg">
|
|
30
|
+
|
|
31
|
+
<p class="text">
|
|
32
|
+
|
|
33
|
+
<br>texttexttexttexttexttexttexttexttexttexttexttexttexttext
|
|
34
|
+
|
|
35
|
+
<br>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
|
|
36
|
+
|
|
37
|
+
texttexttexttexttexttexttext<br></p>
|
|
38
|
+
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```CSS
|
|
44
|
+
|
|
45
|
+
#sample {
|
|
46
|
+
|
|
47
|
+
/* 内容の位置が分かりやすいように背景色を指定 */
|
|
48
|
+
|
|
49
|
+
background-color: #ddd;
|
|
50
|
+
|
|
51
|
+
}
|
|
25
52
|
|
|
26
53
|
|
|
54
|
+
|
|
55
|
+
#sample img {
|
|
56
|
+
|
|
57
|
+
display: block;
|
|
58
|
+
|
|
59
|
+
margin: 0 auto;
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
#sample .text {
|
|
66
|
+
|
|
67
|
+
margin: 30px;
|
|
68
|
+
|
|
69
|
+
text-align: center;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
```
|
|
74
|
+
|
|
27
75
|
あとは質問内容とは別になりますが、要素にクラスを与えているのであればCSSでのセレクタは`#sumple p`よりも`#sumple .text`とした方がパフォーマンス上は無駄がありません。
|
1
不足した語句を追加
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
aKusanoさんが仰っていますが、プロパティごとの仕様はかなり大事なポイントです。
|
|
1
|
+
aKusanoさんが仰っていますが、HTMLの要素やCSSのプロパティごとの仕様はかなり大事なポイントです。
|
|
2
2
|
|
|
3
3
|
リファレンスなどに一通り目を通して仕様を把握しておくと大変役に立つので、ぜひ一度確認してみてください。
|
|
4
4
|
|