与textarea垂直对齐按钮

Question

在以下bootstrap-3 html中，三个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

正如在评论中指出，您的td S设定到vertical-align: middle（这是初始属性值无论如何）应该做的伎俩。

.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>