如何垂直对齐与其 dd 标签相关的 dt 标签？

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

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

Answer 3

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

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

如何垂直对齐与其 dd 标签相关的 dt 标签？

How to vertical align dt tags in relation to its dd tags?

html

css

vertical-alignment