使用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（无论如何都是初始属性值）应该可以解决问题。

＆＃13;

＆＃13;

.specialTable td {
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如前所述：在表格单元格中，td {vertical-align:middle;}应该这样做。

＆＃13;

＆＃13;

td {vertical-align:middle;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;