在下面的 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>
最佳答案
如前所述:在表格单元格中,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>
关于html - 将按钮与文本区域垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45926397/