如何垂直對齊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; 
}