Q&A
これだと、dtとddの要素の高さが異なる場合に上下中央揃えになりません。
また余談ですが、HTML5なので、dt,dd間はコメントアウトせずに、閉じタグを省略すれば改行が入らないですね。
dtとddで横並びのソースを作成しました。
上下の線の中で、dtとdd、どちらも上下中央寄せにしたいのですが、
ddだけ上寄せのまま修正できずにいます。
(ちなみにdtは左寄せ、ddは右寄せにしたいです。)
恐れ入りますが、よろしくお願いいたします。
ソースは以下です。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 7 <meta name="format-detection" content="telephone=no"> 8 9 <style> 10 11 /* Reset and Base */ 12 html { overflow-y:scroll; } 13 body { font-family:Meiryo, 'MS PGothic', arial, sans-serif; } 14 dl, dt, dd { margin:0; padding:0; line-height:1.6; } 15 pre { 16 font-family:Meiryo, 'MS PGothic', arial, sans-serif; border:0; font-size:1.4rem; line-height:1.6; background:#fff; 17 white-space:-moz-pre-wrap; 18 white-space:-pre-wrap; 19 white-space:-o-pre-wrap; 20 white-space:pre-wrap; 21 word-wrap:break-word; 22 } 23 * { 24 -webkit-box-sizing:border-box; 25 -moz-box-sizing:border-box; 26 -o-box-sizing:border-box; 27 -ms-box-sizing:border-box; 28 box-sizing:border-box; 29 } 30 .cf:before { content:''; display:table; } 31 .cf:after { content:''; display:table; clear:both; } 32 33 /* Style */ 34 .category { width:100%; margin:0 0 20px 0; padding:10px 20px; border-top:3px #333 solid; border-bottom:1px #333 solid; } 35 .category dt { float:left; font-size:2.0rem; } 36 .category dd { float:right; } 37 </style> 38 39</head> 40<body> 41 42 43 44<dl class="category cf"> 45 <dt>タイトル</dt> 46 <dd>テキストテキストテキストテキストテキストテキスト</dd> 47</dl> 48 49 50 51</body> 52</html>
回答2件
0
ベストアンサー
float より Flexbox が簡単かと思います
CSS
1dl { 2 display: flex; 3 justify-content: space-between; 4 align-items: center; 5}
投稿2018/08/28 08:47
総合スコア13749
0
要件を整理しましょう．
2つの要素をそれぞれ左右に配置しつつ，上下中央寄せしたいというだけなら，最新の仕様を追う必要はありません．
flexboxを使った記述の方がシンプルに表せますが，もしflexboxの使い方が分からずとも，上の図の通り要素を配置しさえすれば良いのであれば，以下のような古典的な？記述を思いつくこともできたと思います
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5</head> 6<body> 7 <dl class="category cf"> 8 <dt>タイトル</dt><!-- 9 --><dd>テキストテキスト</dd> 10 </dl> 11</body> 12</html>
css
1dl{ 2 display: table-cell; /*（追記）vertical-align:middle;を使えるように*/ 3 padding: 10px 0; /*上下に10pxの余白*/ 4} 5dt,dd{ /*親要素の半分の幅で並べる*/ 6 display: inline-block; 7 width: 50%; 8 vertical-align: middle; /*（追記）上下中央揃え*/ 9} 10dt{ 11 text-align: left; /*左寄せ*/ 12} 13dd{ 14 text-align: right; /*右寄せ*/ 15}
これで目的は十分果たせますが，CSSだけ見ても，flexboxの記述と比べると，ちょっととっつきづらい雰囲気ですね
実は，上のコードにおける工夫は，width:50%:の要素を横並びにするだけではありません．
上の記述からdt,dd{display: inline-block;}を外すと，要素は横並びされません．これは，以前「ブロック要素」と呼ばれていたものの挙動です．旧「ブロック要素」は，必ず縦に並ぶものと決められており，dt,ddなどの仕様もこれに該当するため，このような結果になります．
また，上の例のHTMLでは，dtとddの間に<!---->（コメントアウト）が挟まれていますが，これがない場合，<dt>と<dd>の間に存在する改行文字（\n ※通常は表示されない）のせいで，marginのようなものが出来てしまい，全体の幅が「50% + 改行文字の幅 + 50%」となるため，要素が収まりきらず，カラム落ちが発生し，横並びにすることができません
（追記：改行文字の幅を消すには，dt,ddの閉じタグを省略する方法もあります）
このあたりまで説明されれば，flexboxの「うまみ」がかなり伝わるかと思います
x_xさんの例では，左右に寄せる記述をjustify-content: space-between;，上下中央揃えをalign-items: center;という記述でまとめて行っており，コードが分かりやすくなっています．
flexboxの扱い方はここに分かりやすく載っています．ぜひ参照してください
投稿2018/08/28 14:42
編集2018/08/29 03:07
総合スコア1284
ul,li等だけでなく，dt,ddでも閉じタグが省略できるとは知りませんでした．
要素の高さが異なる場合の上下中央揃えについては，display:table-cell；／vertical-align: middle;を追記しておきます．
こうやって見ていくと，flexboxのメリットを改めて感じさせられます
大事なご指摘ありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。