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

Question

我有这个网站：

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