html - 在 Div 中添加表单时垂直对齐不起作用

Question

我(拼命地)试图在 div 的中间垂直对齐(中间)一个表单。我只是无法让它全部工作，所以我只是回到基础，将一个 div 垂直居中在另一个中间:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
</div>

这非常有效。我假设表单的行为相同，但是当我添加它时，我得到了一些非常奇怪的结果:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
    <form style='display: inline-block; vertical-align: middle;'>
        <label>Add Something:</label>
        <input type='text' value='nothing in there'/>
    </form>
</div>

如您所见，文本相对于蓝色框而不是表单居中。更糟糕的是，不添加 vertical-align: middle 到表单实际上是在改变文本的位置(绿色框)

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>text</div>
    <form style='display: inline-block;'>
        <label>Add Something:</label>
        <input type='text' value='nothing in there'/>
    </form>
</div>

我迷路了。请帮忙!

Answer 1

实际上，我最终将表单嵌入到绿色框内，将表单声明为表格单元格并将其垂直居中。它似乎有效:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
    <div style='display: inline-block; border: 1 solid green;'>
        <form style='display: table-cell; vertical-align:middle;'>
            <label>Add Something:</label>
            <input type='text' value='nothing in there'/>
        </form>
    </div>
</div>