Próbuję sformatować HTML DIV w taki sposób, że margines górny jest ustawiony odpowiednio do wysokości div: jsfiddle
W otoku znajduje się inny div, który ma display: none ustaw na to, ale może się zmienić, gdy użytkownik wprowadzi nieprawidłowe hasło. Rzecz w tym, że poniżej znajduje się div, który jest pchany w dół display: content jest ustawiony na drugi div. Chcę, aby zawartość strony odpowiadała w górę, a nie w dół.
Jak teraz:
Jak powinno być:
Odpowiedzi:
1 dla odpowiedzi № 1Biorąc pod uwagę Twój przykład, cel i preferencje dotyczące unikania flexboxu z powodu IE10, myślę, że najlepszym rozwiązaniem jest użycie display:table dla tego kontenera.
Dzięki temu masz możliwość korzystania vertical-align właściwości w „komórce tabeli”.
Sprawdź poniższy przykład. Dodałem przycisk przełączania, aby pokazać / ukryć captcha do celów demonstracyjnych. Może chcesz wyświetlić go na pełnym ekranie, aby uzyskać efekt.
$("#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>