與textarea垂直對齊按鈕

在以下bootstrap-3 html中，三個buttons與textarea的頂部邊緣對齊。我們如何才能在中間對齊，因此他們大約過了一半？與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>

來源

2017-08-28 nam

你能顯示預期的輸出？ – Win

你有沒有試過：'td {vertical-align：middle;}'？這是基本的，應該工作。如果不顯示更多:) –

@ G-Cyr您的建議工作（謝謝）。 – nam

正如前面所指出：在表細胞，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>

來源

2017-08-28 19:57:30

正如在評論中指出，您的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>

來源

2017-08-28 19:57:13 lumio

與textarea垂直對齊按鈕

回答

相關問題