html - 如何垂直对齐标签、输入和按钮？

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>