回答編集履歴
1
不要なコメントを削除、案1について注釈を追加
test
CHANGED
|
@@ -18,17 +18,19 @@
|
|
|
18
18
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.flex_test-item
|
|
21
|
+
.flex_test-item {
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
display: table-cell;
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
text-align: center; /* 横方向の中央揃え */
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
vertical-align: middle; /* 縦方向の中央揃え */
|
|
28
28
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
```
|
|
32
|
+
|
|
33
|
+
`.flex_test-item`はすべて`display: table-cell;`を指定するのが妥当です。
|
|
32
34
|
|
|
33
35
|
|
|
34
36
|
|
|
@@ -38,21 +40,17 @@
|
|
|
38
40
|
|
|
39
41
|
.flex_test-box {
|
|
40
42
|
|
|
41
|
-
padding: 10px;
|
|
42
|
-
|
|
43
43
|
display: flex;
|
|
44
44
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
/* 中略 */
|
|
48
|
-
|
|
49
47
|
.flex_test-item:nth-child(1) {
|
|
50
48
|
|
|
51
|
-
|
|
49
|
+
display: flex;
|
|
52
50
|
|
|
53
|
-
|
|
51
|
+
justify-content: center; /* 横方向の中央揃え */
|
|
54
52
|
|
|
55
|
-
|
|
53
|
+
align-items: center; /* 縦方向の中央揃え */
|
|
56
54
|
|
|
57
55
|
}
|
|
58
56
|
|
|
@@ -78,9 +76,9 @@
|
|
|
78
76
|
|
|
79
77
|
display: table-cell;
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
text-align: center; /* 横方向の中央揃え */
|
|
82
80
|
|
|
83
|
-
|
|
81
|
+
vertical-align: middle; /* 縦方向の中央揃え */
|
|
84
82
|
|
|
85
83
|
}
|
|
86
84
|
|