Как вертикально выровнять текст в списке определений?

Question

У меня есть список определений. Я хочу вертикально выровнять текст в середине каждого dd.

dl, dt, dd { 
 
    margin:0; 
 
} 
 
dt { 
 
    background: blue; 
 
} 
 
dd { 
 
    min-height: 100px; 
 
    background: gold; 
 
    border-bottom: 3px solid white; 
 
}

<dl> 
 
    <dt>Fruit</dt> 
 
    <dd>Apple</dd> 
 
    <dd>Banana</dd> 
 
    <dd>Pear</dd> 
 
</dl>

Я пытался сделать это с помощью метода ячеек таблицы - JsFiddle. Но это заставило все dd выводить в одной строке, когда они должны быть друг на друга.

Как получить сложный список, с текстом, выровненным по вертикали в каждой позолоченной цветовой гамме?

Обратите внимание: Нет flexfox пожалуйста, и текст может быть многострочного.

Answer 1

Поскольку вы можете добавить дополнительные теги в <dd>, вот решение, поэтому установите каждый <dd> в table и каждый <span> как внутри table-cell, то можно установить выравнивание по вертикали к нему.

Он работает с несколькими строками текста, см. Следующую демонстрационную версию.

dl, dt, dd { 
 
    margin:0; 
 
} 
 
dl { 
 
    width: 100px; 
 
} 
 
dt { 
 
    background: crimson; 
 
} 
 
dd { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 
dd span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid white; 
 
}

<dl> 
 
    <dt>Fruit</dt> 
 
    <dd><span>Apple</span></dd> 
 
    <dd><span>Banana, I love bananas.</span></dd> 
 
    <dd><span>Pear</span></dd> 
 
</dl>