垂直對齊絕對定位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是不容易的。

順便說一句：與其兩個div和絕對定位，你可以使用margin-left: -30px;