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

Question

我有这个HTML：

$scope.setupConstraints = function(){
        NewRouting.setName($scope.routing.name);
        var depot = Depots.get({
                depotId: $scope.routing.depot
            }, function(depot){
                var vehicles = Vehicles.query(function(){
                        NewRouting.setVehicles(vehicles);
                        NewRouting.setDepots([depot]);
                        $location.path('routings/create/5');
                    });
            });
    };

和这个css：

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

但我明白了：

我想要这个：

如何实现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;
}