如何垂直对齐dt标签相对于其dd标签？

Question

我有这个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或为每个标签指定高度（以像素为单位）的可怕黑客的情况下执行此操作吗？

Answer 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。

Answer 2

我刚刚遇到这个问题，并希望为找到此问题的其他人提供一个flexbox答案。 Flexbox使这个任务非常简单，这对开发人员来说非常好！

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

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