Html 如何将dt标签与其dd标签垂直对齐？

我有这个html：

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

但我明白了：

我想要这个：

---

如何实现dt标签与其各自dd标签的垂直对齐？我能在没有像创建div或指定每个标签的像素高度这样可怕的黑客攻击的情况下做到这一点吗？

我想我想出了一个您可能喜欢的解决方案，您可以将元素设置为

display:table cell

和

vertical align:middle

来对齐它们

CSS:

为您更新。

您可以尝试此代码。
html代码：

正文
这个css代码：
dt{
浮动：左；
文本对齐：右对齐；
宽度：30%；
右侧填充：5px；
}
dd{
宽度：70%；
保证金：0；
}

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

dl{
显示器：flex；
对齐项目：居中；
}

我有几十个页面，每个页面都有几十个dt/dd对。我只是不能以像素为单位输入每一对的高度！正如我所说，这是一个“可怕的黑客”。例如，如果我更改默认字体或默认文本区域高度，我将不得不重新调整所有内容…这不是因为它是根据其父级计算的，而是有一种包装方式，您也可以这样做，我更新了答案。对不起，但是你的第二个解决方案有两件事我想避免。如果没有直接的方法来垂直对齐dt标记，我宁愿不垂直对齐它，而不是创建数千个div。。。但是感谢您的尝试。对不起，我正在尝试想出一个适合您的解决方案。使用
实际上不是一个解决方案，因为不同的控件有不同的高度，所以
的数量是可变的。而且，这完全破坏了“垂直对齐”的含义。

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

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;
}

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;
}