Когда я использую сочетание клавиш, чтобы переместить окно в левую / правую часть экрана, а затем свернуть его вверх / вниз.Используя клавишу Windows + стрелка влево / вправо, затем клавишу Windows + стрелку вверх / вниз ИЛИ при использовании мыши, перемещая курсор к любому краю или углу окна, пока не появится двуглавая стрелка, а затем измените ее размер на свой.
Я хочу, чтобы div (ящик белого контейнера) всегда располагался в центре.
Прежде всего, я пытаюсь создать страницу входа, которая будет такой же, как на следующем рисунке, рядом с фоном.картинка:
Я использую экран с разрешением 1920x1080p, я не знаю, хороша ли моя работа в соответствии с использованием прямо в div или в классах, или как это будет работать с другими разрешениями.
Редактировать: Мой фоновый рисунок также 1920x1080p.
body {
background-image: url(../images/website-login-background.jpg);
background-size: initial;
background-repeat: no-repeat;
resize: initial;
font-family: Arial;
}
.white-container {
margin-top: 25%;
margin-left: 36%;
/* width: max-content; */
width: 28em;
height: 28em;
background-color: white;
text-align: center;
}
h1 {
padding-top: 2em;
font-size: 1.8em;
font-weight: normal;
}
.form-menu {
font-size: 1em;
height: 2em;
width: 100%;
text-align: center;
}
.input {
font-size: 1em;
height: 2em;
width: 80%;
}
.linkaAttr {
overflow: hidden;
color: blue;
padding-left: 50%;
}
<body>
<div class="white-container">
<header>
<h1>Log In to Your Account</h1><br>
</header>
<form class="form-menu" action="#">
<input class="input" type="text" name="iD" placeholder=" Email or phone or username"><br><br>
<input class="input" type="password" name="pass" placeholder=" Password"><br><br>
<div class="linkaAttr">
<a href="#">Forgot password?</a><br><br><br>
</div>
<input class="input" type="submit" style="background-color: rgb(30, 151, 213); color: white" value="Log In"><br><br><br>
<p style="color: gray">Need an account? <a href="#">Sign Up</a></p>
</form>
</div>
</body>
В фактическом результате, когда я изменяю размер окна с помощью клавиатуры влево / вправо + вверх / вниз, у меня есть возможность прокрутить окно,Мне это не нужно, и белые div не отображаются полностью, и мне нужно прокрутить вниз, чтобы показать это.Другая проблема заключается в том, что белый div не отображается в центре, когда я изменяю размер окна таким образом.
В ожидаемом результате я хочу, чтобы белый div был минимальным размером целогоНа странице, если я изменю ее размер с помощью мыши, белый div всегда будет в центре, пока размер окна не может уменьшиться, потому что он показывает только div.Если я изменю размер страницы с помощью клавиатуры.тогда я хочу, чтобы div всегда был полностью показан и центрирован.