回答編集履歴
1
追記
test
CHANGED
|
@@ -42,6 +42,8 @@
|
|
|
42
42
|
|
|
43
43
|
dl{
|
|
44
44
|
|
|
45
|
+
display: table-cell; /*（追記）vertical-align:middle;を使えるように*/
|
|
46
|
+
|
|
45
47
|
padding: 10px 0; /*上下に10pxの余白*/
|
|
46
48
|
|
|
47
49
|
}
|
|
@@ -51,6 +53,8 @@
|
|
|
51
53
|
display: inline-block;
|
|
52
54
|
|
|
53
55
|
width: 50%;
|
|
56
|
+
|
|
57
|
+
vertical-align: middle; /*（追記）上下中央揃え*/
|
|
54
58
|
|
|
55
59
|
}
|
|
56
60
|
|
|
@@ -82,13 +86,15 @@
|
|
|
82
86
|
|
|
83
87
|
また，上の例のHTMLでは，`dt`と`dd`の間に`<!---->`（コメントアウト）が挟まれていますが，これがない場合，`<dt>`と`<dd>`の間に存在する改行文字（`\n` ※通常は表示されない）のせいで，marginのようなものが出来てしまい，全体の幅が「50% + 改行文字の幅 + 50%」となるため，要素が収まりきらず，カラム落ちが発生し，横並びにすることができません
|
|
84
88
|
|
|
89
|
+
（追記：改行文字の幅を消すには，dt,ddの閉じタグを省略する方法もあります）
|
|
90
|
+
|
|
85
91
|
|
|
86
92
|
|
|
87
93
|
このあたりまで説明されれば，flexboxの「うまみ」がかなり伝わるかと思います
|
|
88
94
|
|
|
89
95
|
|
|
90
96
|
|
|
91
|
-
x_xさんの例では，左右に寄せる記述を`justify-content: space-between;`という記述でまとめて行ってい
|
|
97
|
+
x_xさんの例では，左右に寄せる記述を`justify-content: space-between;`，上下中央揃えを`align-items: center;`という記述でまとめて行っており，コードが分かりやすくなっています．
|
|
92
98
|
|
|
93
99
|
|
|
94
100
|
|