回答編集履歴
2
修正
answer
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
左右中央揃えにしたい対象: **display: inline、display: inline-block**
|
|
9
9
|
CSSを指定する要素: **親要素**
|
|
10
10
|
|
|
11
|
+
文字の中央寄せ、中央揃えにする目的で使用します。
|
|
11
|
-
|
|
12
|
+
背景色をつけた場合、背景色は横幅いっぱいで、その中の文字だけ中央に配置されている、という見た目になります。
|
|
12
|
-
その<span>を左右中央揃えにしたい場合、親要素の<p>に`text-align: center;`を指定します。
|
|
13
13
|
|
|
14
14
|
```HTML
|
|
15
15
|
<p class="parent">
|
|
16
|
-
<span>ああああ</span>
|
|
16
|
+
<span class="child">ああああ</span>
|
|
17
17
|
</p>
|
|
18
18
|
```
|
|
19
19
|
```CSS
|
|
@@ -27,6 +27,9 @@
|
|
|
27
27
|
左右中央配置にしたい対象: **display: block;**
|
|
28
28
|
CSSを指定する要素: **対象自身 (=親要素は関係ない)**
|
|
29
29
|
|
|
30
|
+
文字は中央揃えにはなりません。左揃えのままです。
|
|
31
|
+
背景色をつけてみるとわかりやすいですが、背景色のある領域が、左右中央に配置されます。
|
|
32
|
+
|
|
30
33
|
```HTML
|
|
31
34
|
<div class="parent">
|
|
32
35
|
<div class="child">ああああ</div>
|
|
@@ -44,6 +47,8 @@
|
|
|
44
47
|
左右中央配置にしたい対象: **なんでも**
|
|
45
48
|
CSSを指定する要素: **親要素**
|
|
46
49
|
|
|
50
|
+
[2]よりも、横幅を指定しなくても使えるといった点で便利なので、最近はよく使用されています。
|
|
51
|
+
|
|
47
52
|
```HTML
|
|
48
53
|
<div class="parent">
|
|
49
54
|
<div class="child">ああああ</div>
|
1
修正
answer
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
**[1] 文字やインライン要素を中央揃えにする方法**
|
|
8
|
-
|
|
8
|
+
左右中央揃えにしたい対象: **display: inline、display: inline-block**
|
|
9
|
-
|
|
9
|
+
CSSを指定する要素: **親要素**
|
|
10
10
|
|
|
11
11
|
以下の場合、標準では<span>は`display: inline;`が指定されています。
|
|
12
12
|
その<span>を左右中央揃えにしたい場合、親要素の<p>に`text-align: center;`を指定します。
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
**[2] 要素を左右中央配置する方法1**
|
|
27
|
-
|
|
27
|
+
左右中央配置にしたい対象: **display: block;**
|
|
28
|
-
|
|
28
|
+
CSSを指定する要素: **対象自身 (=親要素は関係ない)**
|
|
29
29
|
|
|
30
30
|
```HTML
|
|
31
31
|
<div class="parent">
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
|
|
42
42
|
---
|
|
43
43
|
**[3] 要素を左右中央配置する方法2**
|
|
44
|
-
|
|
44
|
+
左右中央配置にしたい対象: **なんでも**
|
|
45
|
-
|
|
45
|
+
CSSを指定する要素: **親要素**
|
|
46
46
|
|
|
47
47
|
```HTML
|
|
48
48
|
<div class="parent">
|