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属性，该属性应设置为{{ 1}}，如果你期望对齐效果。

middle

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>

你还错过了行中的标签

如何垂直对齐标签，输入和按钮？

2 个答案: