Css 具有固定宽度和高度的div中相对对齐的元素

我的标记如下所示：

<div id="content">
   <img src="some_content.jpg">
   <form action="...">
     <input type="text" ... >
     <input type="submit" ...>
   </form>

   <div id="forgotyourpassword">
     <a href="somelink.com">Forgot your password?</a>
   </div>
</div>

以下是一些相关的css：

#content{
    position:absolute;
    width: 650px; 
    left:50%;
    top:50%;
    height:242px;
    margin-top:-126px;
    margin-left: -325px;
    text-align: center;
}

#content > *{
  vertical-align: middle;
  display: inline-block;
  zoom:1; 
  *display:inline;
  margin-left: 20px;
  margin-right: 20px;
}

这一切都很好。但是，在某些情况下，例如，如果表单提交发生错误，那么后端将向元素中的from追加一条错误消息

在这种情况下，我希望链接像这样对齐：

我的css的问题在于，忘记密码链接是从父内容的底部对齐的。我需要将它与按钮对齐

我最初的想法是将前面的YourPassword div直接对齐到表单下面。因此，如果在添加错误消息时表单的大小发生变化，forgotyourpassword链接将被向下推

然后，我可以将边距顶部设置为负像素量，然后将我的forgotyourpassword div向后推x像素，这样无论表单有多高，元素都将与submit按钮对齐

我发现情况并非如此：

在Firefox10中，一旦forgotyourpassword div与表单的内容区域重叠，它似乎就不会被我定义的像素数量推高。 在IE9中，forgotyourpassword出现在表单上方！ 有没有一种方法可以只使用CSS，并与IE7及以上版本和firefox配合使用

#content form{
    position: absolute;
    top: 80px;
    right: 0px;
}
#forgot-password{
    height:80px;
}

如果您尝试这样的操作，您将表单从流中取出，链接将显示在其上方，而无需任何微调。一旦内容表单的最大值和忘记密码的高度值匹配，您就应该像房子一样安全

---

在某些情况下，您可能会在清除绝对定位的div时遇到问题，但您说您正在设置内容的高度，因此这里不应该有问题。

由于我无法更改表单的标记，因此我无法将div for forgotyourpassword作为表单的子级插入

因此，我添加了一个包装器div：

<div id="content"> 
   <img src="some_content.jpg"> 
   <div id="wrapper>
       <form action="..."> 
         <input type="text" ... > 
         <input type="submit" ...> 
       </form> 

       <div id="forgotyourpassword"> 
         <a href="somelink.com">Forgot your password?</a> 
       </div> 
   </div>
</div> 

---

这是我现在能想到的最好的解决方案，因为包装器div不会向文档添加任何语义值，但我认为在我们可以使用数学并在CSS中获取元素的维度之前，不会有一个简单的解决方案。

将要对齐的内容包含在一个具有预先指定宽度的div中。。到时候它会对齐的。。我认为你的问题正在发生，因为你的元素没有包装器，没有包装器，它们在不同的浏览器中的行为往往会不同。我认为我无法将表单从流中取出，因为它在内容分区中垂直和水平居中，与另一个图像一起。你可以使用顶部和右侧的值，以及任何高度或宽度值，以保持其精确定位。当我说把它放在流中时，我的意思是它不会影响其他元素的位置，链接将有效地占据流中的位置。我已经用一些其他可能相关的CSS更新了我的问题。

<div id="content"> 
   <img src="some_content.jpg"> 
   <div id="wrapper>
       <form action="..."> 
         <input type="text" ... > 
         <input type="submit" ...> 
       </form> 

       <div id="forgotyourpassword"> 
         <a href="somelink.com">Forgot your password?</a> 
       </div> 
   </div>
</div> 

#forgotyourpassword{
   float: left;
   margin-top: 10px;
}