如何垂直對齊標簽，輸入和按鈕？

Question

我正在嘗試垂直對齊輸入，標簽和按鈕（位於div內）

我該如何實現

我目前無法正常工作的代碼如下

<table>
    <tr>
        <label style="display: inline-block;float: left; vertical-align: baseline; position: relative; padding-top :5px">Select File</label>
    </tr>
    <tr>
        <input type="text" style="display: inline-block;float: left; vertical-align: baseline">
    </tr>
    <tr>
        <div style="display: inline-block;vertical-align: baseline;float: left" class="file-upload btn" >
            Browse
            <input class="required file-upload-input" type="file">
        </div>
    </tr>
</table>

Answer 1

似乎您將tr與td混淆了。 您應該只使用一個tr （表行），並將每個元素放在一個td （表單元格）中。

然后，擺脫div，擺脫為元素設置的內聯樣式... td可以使用vertical-align屬性，如果您期望對齊效果，則應將其設置為middle 。

<table>
    <tr>
        <td style="vertical-align:middle;">
            <label>Select File</label>
        </td>
        <td style="vertical-align:middle;">
            <input type="text" />
        </td>
        <td style="vertical-align:middle;">
            <input class="required file-upload-input" type="file" />
        </td>
    </tr>
</table>

Answer 2

嘗試這個

<table>
    <tr vertical-align="middle">
        <td>
        <label style="display: inline-block;float: left; position: relative; padding-top :5px">
            Select File
        </label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" style="display: inline-block;float: left; vertical-align: baseline">
        </td>
    </tr>
    <tr vertical-align="middle">
        <td>
            <div style="display: inline-block; float: left" class="file-upload btn"  >
                Browse
                <input class="required file-upload-input" type="file">
            </div>
        <td>
    </tr>
</table>

您還錯過了行中的標簽