垂直对齐绝对定位div

Question

我有两个要素;输入字段和div - 一个接一个。 Div绝对位于相对元素内，位于输入的右侧。

输入具有固定高度，但div的高度取决于内容。

我想要实现的是输入旁边的中间垂直对齐div。我不确定这是否可能是纯CSS，所以这就是为什么我添加了javascript标签。

HTML：

<td>
<input type="text"/>
<div id="rel" style='position:relative;'>
<div id="content">
content
</div>
</div>
</td>

CSS：

#content {

position:absolute;
left:30px;

}

...

Answer 1

只需使用

td input {
    vertical-align:middle;
}

好的，你已经有了一张桌子，vertical centering via CSS并不容易。

Btw：您可以使用margin-left: -30px;

，而不是两个div和绝对定位