Как сделать окно регистрации по центру?
12
Код HTML:
1234567891011121314151617181920212223242526
<!DOCTIPE>
<html>
<head>
<meta charset = "utf-8">
<title>Регистрация</title>
<link rel = "stylesheet" href = "background_animation.css">
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<form>
<div class = "container">
<h1>Регистрация профиля</h1>
<p>Заполните форму для создания аккаунта</p>
<hr>
<label for = "email"><b>Электронная почта: </b></label>
<input type = "text" placeholder = "Email" name = "email" required>
<label for = "psw"><b>Пароль: </b></label>
<input type = "password" placeholder = "Пароль" name = "psw" required>
</div>
</form>
</body> Код CSS:
12345678910111213141516171819202122232425262728293031323334353637383940
* {box-sizing: border-box;}
.container {
padding: 16px;
}
input[type = text], input[type = password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
}
div {
background-color: beige;
width: 600px;
}
.registbtn {
background-color: #4CAF50;
color: #ddd;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
Так же на фоне воспроизводится анимации. Надо, чтобы она не была чем-либо закрыта
По дате
По рейтингу
могут быть разные варианты, можно использовать flex, например...
если только по горизонтали по центру, то для div.container можно добавить стиль
margin: 0 auto;
1234
body {
display: flex;
justify-content: center;
} По вертикали нужно позиционировать отдельно. Хотя если на странице одна лишь форма и нет других элементов, то можно дополнить свойством align-content: center.
Контейнеру в котором находится блок регистрации, прописываешь максимальную ширину max-width и прописываешь margin: 0 auto; вот тебе и центровка.
Учи язык, мамкин программист
Больше по теме