Css DL标签-DT标签中的垂直对齐文本，颜色背景，高度与DD标签相同

给定以下html和CSS：

dl.table-display{
浮动：左；
宽度：520px；
利润率：1米0；
填充：0；
边框底部：1px实心#999；
}
.表格显示dt{
清除：左；
浮动：左；
宽度：200px；
保证金：0；
填充物：5px；
边框顶部：1px实心#999；
字体大小：粗体；
背景色：#中交；
}
.表格显示dd{
浮动：左；
宽度：300px；
保证金：0；
填充物：5px；
边框顶部：1px实心#999；
}

关键1
值1
关键2
值2
带换行符
和换行符

设置dt元素的高度将“拉伸”背景，只要此高度>=包含的dd的高度，它就会看起来像您想要的那样

dt{height:100px;}

提供文本对齐：在dl标记上居中将使文本居中

dl{text-align:center;}

然后，硬部分尝试将文本垂直对齐到中间。一个选项是将文本包含在绝对位置的div中。。但是有点乱

<dt><div>Key 1</div></dt>

dt{position:relative;height:100px;}
dt div{position:absolute;bottom:50px;}

键1
dt{位置：相对；高度：100px；}
dt div{位置：绝对；底部：50px；}

请点击此处查看其他选项/解决方案

---

希望这会有所帮助。

为dt元素设置一个高度将“拉伸”背景，只要此高度>=包含的dd的高度，它就会看起来像您想要的那样

dt{height:100px;}

提供文本对齐：在dl标记上居中将使文本居中

dl{text-align:center;}

然后，硬部分尝试将文本垂直对齐到中间。一个选项是将文本包含在绝对位置的div中。。但是有点乱

<dt><div>Key 1</div></dt>

dt{position:relative;height:100px;}
dt div{position:absolute;bottom:50px;}

键1
dt{位置：相对；高度：100px；}
dt div{位置：绝对；底部：50px；}

请点击此处查看其他选项/解决方案

---

希望这有帮助。

dt{display:table cell}

将允许您垂直对齐dt中的文本。在我的例子中，我需要文本与底部垂直对齐。例如：

dt {
    display:table-cell;
    vertical-align:middle;
    height:5em;
}

---

顺便说一句，

dl{display:table cell}

将把每个

放在一条水平线上，类似于浮动（或类似于一行表格单元格）。如果将高度设置为

，并在底部添加边框，则该底部边框将形成一条类似于表格单元格边框的直线

dt{display:table cell}

将允许您垂直对齐dt中的文本。在我的例子中，我需要文本与底部垂直对齐。例如：

dt {
    display:table-cell;
    vertical-align:middle;
    height:5em;
}

---

顺便说一句，

dl{display:table cell}

将把每个

放在一条水平线上，类似于浮动（或类似于一行表格单元格）。如果将高度设置为

，并在底部添加边框，则该底部边框将形成一条类似于表格单元格边框的直线

是否可以将

dd

放在

dt

标签内？是否可以将

dd

放在

dt

标签内？