如何垂直对齐 dt 标签与其 dd 标签？答案

【问题标题】：How to vertical align dt tags in relation to its dd tags?如何垂直对齐 dt 标签与其 dd 标签？
【发布时间】：2019-03-08 23:19:15
【问题描述】：

我有这个 html：

<dl>
    <dt><label for='txaText'>Text</label></dt>
    <dd><textarea id='txaText'></textarea></dd>
</dl>

还有这个css：

dt {
  float: left;
  text-align: right;
  width: 30%;
  padding-right:5px;
}
dd {
  width: 70%;
  margin: 0;
}

但我明白了：

我想要这个：

如何实现 dt 标签相对于其各自的 dd 标签的垂直对齐？我可以在没有创建 div 或为每个标签指定高度（以像素为单位）之类的可怕技巧的情况下做到这一点吗？

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

我想我想出了一个您可能喜欢的解决方案，您可以将元素设置为 display:table-cell 和 vertical-align:middle 以对齐它们。

CSS：

dl{
   border: 1px solid red;
}

dt {
  display:table-cell;
  vertical-align:middle;
  width: 30%;
  padding-right:5px;
}
dd {
  display:table-cell;
  vertical-align:middle;
  width: 70%;
  margin: 0;
}

为您更新了CODEPEN DEMO。

【讨论】：

我有几十页，每一页都有几十个 dt/dd 对。我只是不能以像素为单位输入每对的高度！正如我所说，这是一个“可怕的黑客”。例如，如果我更改默认字体或默认文本区域高度，我将不得不重新调整所有内容...
这不是相对于它的父级计算的，但有一种包装方式你也可以这样做，我更新了答案。
抱歉，您的第二个解决方案有两件事我想避免。
如果没有直接的方法来垂直对齐 dt 标签，我宁愿让它不垂直对齐，而不是创建数千个 div...但是感谢您的尝试。
抱歉，我正在尝试提出适合您的解决方案。

【解决方案2】：

我刚刚遇到了这个问题，想为其他发现这个问题的人提供一个 flexbox 答案。 Flexbox 使这项任务变得非常简单，这对开发人员来说非常棒！

dl {
  display: flex;
  align-items: center;
}

【讨论】：

这会将所有项目放在同一行。

【解决方案3】：

You can try this code.

html code:

<dl>
    <dt><label for='txaText'><br>Text</label></dt>
    <dd><textarea id='txaText'></textarea></dd>
</dl>

and this css code:

dt {
  float: left;
  text-align: right;
  width: 30%;
  padding-right:5px;
}
dd {
  width: 70%;
  margin: 0;
}

【讨论】：

使用
实际上并不是一个解决方案，因为不同的控件有不同的高度，所以
的数量是可变的。此外，这完全破坏了“垂直对齐”的含义。