响应性地改变保证金

Question

我尝试格式化HTML DIV的方式是根据div的高度响应设置margin-top： jsfiddle

包装器中有另一个div，它设置了display: none，但是当用户输入错误的密码时它可能会改变。事情是，下面有一个div，当display: content设置为第二个div时，它会被按下。我希望页面的内容能够相应地向上而不是向下。

现在怎么样：

它应该如何：

Answer 1

鉴于您的示例，您的目标以及您因IE10而避免使用flexbox的偏好，我认为您最好的选择是使用display:table来容纳此容器。

有了这个，您就可以在“table-cell”中使用vertical-align属性。

检查以下示例。我添加了一个切换按钮来显示/隐藏您的验证码以进行演示。 可能希望全屏查看以获得效果。

$("#toggle").on('click', function() {
  $(".captcha").toggle();
});

html,body {
  height: 100%;
}
.outer-wrapper {
  height: 100%;
  width: 100%;
  background: #eeeeee;
  display: table;
}

.inner-wrapper {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  height: inherit;
}

.login-wrapper {
  background-color: #172238;
  color: white;
  width: 200px;
  text-align: center;
  height: auto;
  display: block;
  margin: 0 auto;
}

.captcha{
  margin-top: 250px;
  display: content; // This one changes
}

.homologation-line {
  min-width: 200px;
  background-color: #ffd800;
  color: black;
  text-align: center;
  height: 30px;
}

#toggle {
 position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">toggle captcha</button>
<div class="outer-wrapper">
  <div class="inner-wrapper">
      <div class="login-wrapper">
        <p>Login</p>
        <div class="captcha">
          ENTER THE DIGITS:
        </div>
    </div>
    <div class="homologation-line">
       HOMOLOGATION
    </div>
  </div>
</div>