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

Question

给定以下 html 和 CSS:

dl.table-display {
  float: left;
  width: 520px;
  margin: 1em 0;
  padding: 0;
  border-bottom: 1px solid #999;
}

.table-display dt {
  clear: left;
  float: left;
  width: 200px;
  margin: 0;
  padding: 5px;
  border-top: 1px solid #999;
  font-weight: bold;
  background-color: #cccccc;
}

.table-display dd {
  float: left;
  width: 300px;
  margin: 0;
  padding: 5px;
  border-top: 1px solid #999;
}

<dl class="table-display">
  <dt>Key 1</dt>
  <dd>Value 1</dd>
  <dt>Key 2</dt>
  <dd>Value 2<br/>With line breaks<br/>and line breaks</dd>
</dl>

我正在尝试使 DT 和 DD 标签中的文本居中，并让 DT 标签背景色覆盖 100% 的较长 DD 标签。使用上面的代码创建一个 .html 文件，看看它现在的样子。我确实有这个作为表格，但我现在被迫使用 DL 标记。任何帮助，将不胜感激。谢谢!

Answer 1

为你的 dt 元素设置一个高度会“拉伸(stretch)”背景，只要这个高度 >= 包含的 dd 的高度，它就会看起来像你想要的那样。

dt{height:100px;}

在 dl 标签上提供 text-align:center 将使您的文本居中。

dl{text-align:center;}

困难的部分是尝试将文本垂直对齐到中间。一个选项是将文本包含在绝对定位的 div 中。但是有点困惑。

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

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

在此处查看其他选项/解决方案 Vertical Align text in a Label

希望这对您有帮助..