Estou tentando formatar um DIV HTML de uma maneira que a margem superior seja definida responsavelmente com base na altura da div: jsfiddle
Há outra div dentro do wrapper, que tem um display: none definido para ele, mas pode mudar quando o usuário digitar uma senha incorreta. O problema é que há uma div abaixo que está sendo pressionada quando display: content é definido como a segunda div. Quero que o conteúdo da página suba responsivamente para cima, em vez de para baixo.
Como está agora:
Como deve ser:
Respostas:
1 para resposta № 1Dado o seu exemplo, seu objetivo e sua preferência para evitar o flexbox devido ao IE10, acho que sua melhor opção é usar display:table para este contêiner.
Com isso, você tem a capacidade de usar vertical-align propriedades na "célula da tabela".
Veja o exemplo abaixo. Adicionei um botão de alternância para mostrar / ocultar seu captcha para fins de demonstração. Pode querer vê-lo em tela cheia para obter o efeito.
$("#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>