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

Question

我的标记看起来像这样：

<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>

表单的标记由CMS生成，因此我无法更改它。

content div具有固定的宽度和高度，因此我可以在页面中垂直和水平居中。目前，content中的所有子项都设置为display: inline-block，然后在content div中水平和垂直对齐。

我已将忘记密码的链接对齐如下：

以下是相关链接的CSS：

#forgot-password{

    float: right;
    margin: 0; /* reset some stuff inherited from parent */
    padding: 0; /* reset some stuff inherited from parent */
    margin-right: 171px;
    margin-top: -20px;
}

以下是一些相关的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;
}

这一切都运作良好。但是，在某些情况下，例如，如果表单提交发生错误，则后端将在<form>元素中将错误消息附加到from。

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

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

我最初的想法是，我会将forgotyourpassword div直接对齐在表单下面。因此，如果在添加错误消息时表单的大小发生更改，则会向下推送forgotyourpassword链接。

然后我可以将margin-top设置为负像素数，然后将forgotyourpassword div向上推x像素，然后无论表格多高，都会将元素与提交按钮对齐已成为。

我发现事实并非如此：

• 在firefox 10中，forgotyourpassword div似乎没有按照我在表单内容区域重叠时定义的像素量“向上推”。
• 在IE9中，forgotyourpassword出现在表单上方！

有没有办法只使用CSS并使用IE7及以上版本和firefox？

Answer 1

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

如果您尝试这样的操作，则可以从流程中取出表单，链接将显示在其上方，而不进行任何微调。一旦#content表格的最高值和＃forgot-password匹配的高度值匹配，你应该是安全的房子。

在某些情况下，你可能会遇到清除绝对定位div的问题，但是你说你正在为#content设置高度，所以这不应该是一个问题。

Answer 2

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

所以，我添加了一个包装器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> 

然后只需调整forgotyourpassword div的边距：

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

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