ボタンをテキストエリアに垂直に整列

Question

bootstrap-3 htmlの3つのbuttonsは、textareaの上端に揃えられています。代わりに途中でどのように揃えることができますか？

注：関連性はないかもしれませんが、その場合は、Visual Studio 2017プロジェクトでデフォルトのブートストラップ設定を使用しています。

<tr class="row"> 
    <td class="col-md-8"> 
     <textarea class="txtInput form-control" rows="3" asp-for="@Model.lstOrders" style="min-width:630px;overflow:auto;"></textarea> 
    </td> 
    <td class="col-md-4 text-right"> 
     <button type="button" class="btnEdit btn-info btn-xs">Edit</button> | 
     <button type="button" class="Savebtn btn-info btn-xs" value="@Model.lstOrders">Save</button> | 
     <button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button> 
<tr> 

Answer 1

として、以前のコメント：表セル内では、td {vertical-align:middle;}が行う必要があります。

td {vertical-align:middle;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table> 
 
<tr class="row"> 
 
    <td class="col-md-8"> 
 
     <textarea class="txtInput form-control" rows="3" asp-for="@Model.lstOrders" style="min-width:300px;overflow:auto;"></textarea> 
 
    </td> 
 
    <td class="col-md-4 text-right"> 
 
     <button type="button" class="btnEdit btn-info btn-xs">Edit</button> | 
 
     <button type="button" class="Savebtn btn-info btn-xs" value="@Model.lstOrders">Save</button> | 
 
     <button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button> 
 
</tr> 
 
</table>

Answer 2

としては、トリックを行う必要があります（とにかく初期プロパティ値である）vertical-align: middleにごtdの設定、コメントで指摘しました。

.specialTable td { 
 
    vertical-align: middle; 
 
}

<table class="specialTable"> 
 
    <tr class="row"> 
 
    <td class="col-md-8"> 
 
     <textarea class="txtInput form-control" rows="3" asp-for="@Model.lstOrders" style="overflow:auto;"></textarea> 
 
    </td> 
 
    <td class="col-md-4 text-right"> 
 
     <button type="button" class="btnEdit btn-info btn-xs">Edit</button> | 
 
     <button type="button" class="Savebtn btn-info btn-xs" value="@Model.lstOrders">Save</button> | 
 
     <button type="button" class="btnResetOrginVal btn-info btn-xs">Reset</button> | <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button> 
 
    </tr> 
 
</table>