TOP > ウェブデザイン > コーディング > 【CSS】横並びのdtとddで高さを揃えてテキストを中央に配置する方法

【CSS】横並びのdtとddで高さを揃えてテキストを中央に配置する方法

2021/3/20

2021/10/18

20375 views

dt dd 高さ揃える

コーディングレイアウトでdl要素のdtとddを横並びで配置することは多いと思います。
このとき、ddが複数行などでdtと高さが違う場合にdtのテキストを高さ中央に配置した方がきれいですよね。
それを簡単に実現するサンプルソースになります。

実現させるCSSの記述方法

HTML

<dl>
<dt>柴犬</dt>
<dd>柴犬は、日本原産の日本犬の一種。<br>日本犬の中で唯一の小型犬です。<br>日本の天然記念物に指定された7つの日本犬種の1つです。</dd>
</dl>

CSS

dl {
    display: table;
    border: solid 1px #e1e1e1;
    width: 100%;
}
dl dt {
    width: 20%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #f1f1f1;
}
dl dd {
    width:76%;
    display: table-cell;
    vertical-align: middle;
    padding: 2%;
}

「display: table;」と「width: 100%;」をdlに、「display: table-cell;」と「vertical-align: middle;」をdt・ddに適用させます。
使ってしまいそうなfloatと、display: block;を使わないのがポイントです。