回答編集履歴
2
誤記があったため訂正
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
#### inline-block
|
|
29
|
+
#### inline-blockの仕様
|
|
30
30
|
|
|
31
31
|
- ブロック要素のように width、height、上下の padding と margin を指定できる box を作る
|
|
32
32
|
|
|
@@ -48,15 +48,53 @@
|
|
|
48
48
|
|
|
49
49
|
#### vertical-alignに関して
|
|
50
50
|
|
|
51
|
-
vertical-alignプロパティ
|
|
51
|
+
vertical-alignプロパティは、
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
- インライン要素とテーブルセル同士で「隣接している要素」
|
|
54
54
|
|
|
55
|
+
- ブロックレベル要素には適用にはできない
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
つまるところ`<div class="aaa">カテゴリ</div>`の.aaaに対して設定しても、ブロック要素内包要素はテキストノードのみの為、効きません。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
55
|
-
効かせたければ
|
|
63
|
+
効かせたければ一工夫いれて**親にあたるdiv要素に擬似要素:beforeを使用**するなどする必要があります。
|
|
64
|
+
|
|
65
|
+
（※先の例は間違えていたので訂正）
|
|
56
66
|
|
|
57
67
|
```
|
|
58
68
|
|
|
69
|
+
.aaa{
|
|
70
|
+
|
|
71
|
+
width:1000px;
|
|
72
|
+
|
|
73
|
+
height:50px;
|
|
74
|
+
|
|
75
|
+
background-color:#000000;
|
|
76
|
+
|
|
77
|
+
color:#FFFFFF;
|
|
78
|
+
|
|
79
|
+
text-align: center;
|
|
80
|
+
|
|
81
|
+
margin:auto;
|
|
82
|
+
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.aaa:before{
|
|
86
|
+
|
|
59
|
-
|
|
87
|
+
content: '';
|
|
88
|
+
|
|
89
|
+
display: inline-block;
|
|
90
|
+
|
|
91
|
+
width: 0px;
|
|
92
|
+
|
|
93
|
+
height: 100%;
|
|
94
|
+
|
|
95
|
+
vertical-align:middle;
|
|
96
|
+
|
|
97
|
+
}
|
|
60
98
|
|
|
61
99
|
```
|
|
62
100
|
|
|
@@ -64,8 +102,6 @@
|
|
|
64
102
|
|
|
65
103
|
---
|
|
66
104
|
|
|
67
|
-
上下左右中央揃えにしたい、ということなら
|
|
68
105
|
|
|
69
|
-
過去の質問にも多々回答があるので、詳しくは割愛しますが様々な方法があります。
|
|
70
106
|
|
|
71
107
|
最近だとflexboxを使う手法が簡単かと思います。
|
1
注釈追加
test
CHANGED
|
@@ -38,9 +38,11 @@
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
この4つ目の
|
|
41
|
+
この4つ目の仕様から、「外側」にあたるmargin:autoは0として扱われるため、
|
|
42
42
|
|
|
43
|
+
inline-blockにmargin:auto指定時は要素が左に寄ります。（注：祖先要素のtext-alignに依存するため、text-align:rightなら右へ寄る）
|
|
44
|
+
|
|
43
|
-
|
|
45
|
+
※marginに対してauto以外の値を入れるとちゃんと効きます
|
|
44
46
|
|
|
45
47
|
|
|
46
48
|
|