如何垂直对齐标签、输入和按钮？答案

【问题标题】：How do I vertically align label, input and button?如何垂直对齐标签、输入和按钮？
【发布时间】：2014-09-04 03:15:47
【问题描述】：

我正在尝试垂直对齐输入和标签和按钮（在 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>

【问题讨论】：

您应该尝试在 tr 上应用垂直对齐...
尝试垂直对齐：50%；（或中间）。此外，您的 HTML 无效，您可以（应该）在没有表格的情况下执行此操作，只需 div
如果去掉vertical-align，在标签上添加top:3px，就可以实现居中定位。有效的表格格式是<table><tbody><tr><td></td></tr></tbody></table>，有时您可以在此处完成一半的工作，但如果浏览器未按照您希望的方式呈现内容，请不要感到惊讶。
<td valign="middle"> 应该可以工作

标签： html css vertical-alignment

【解决方案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>

【讨论】：

【解决方案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>

您还错过了行中的标签

【讨论】：

对不起，这不起作用，它将每个 tr 显示在不同的行上
@user3779089：你能创建一个 Fiddle 并准确说出你想要什么吗？
我想你的意思是<tr style="vertical-align: middle;">