html - 将按钮与文本区域垂直对齐

Question

在下面的 bootstrap-3 html 中，三个 button 与 textarea 的上边缘对齐。我们如何才能在中间对齐，而不是让它们大约下降一半？

注意:它可能不相关但以防万一，我在 Visual Studio 2017 中使用默认 Bootstrap 设置元素。

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