Блог

Главная - Вопросы по программированию - Страница входа на мой сайт не центрирована с использованием текущего CSS

Страница входа на мой сайт не центрирована с использованием текущего CSS

#html #web

#HTML #сеть

Вопрос:

Я не уверен, почему область входа не центрирована и почему фотографии также не загружаются сзади

Я пытался центрировать их, но не думаю, что делаю это правильно. он просто каждый раз торчит в левом верхнем углу.

 * {  margin: 0;  padding: 0;  box-sizing: border-box; }  body {  background: url('imgbg1.jpg') no-repeat center;  background-size: cover;  font-family: sans-serif; }  .login-wrapper {  height: 100vh;  width: 100vw;  display: flex;  justify-content: center;  align-items: center; }  .form {  position: relative;  width: 100%;  max-width: 380px;  padding: 80px 40px 40px;  background: rgba(0, 0, 0, 0.7);  border-radius: 10px;  color: #fff;  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); }  .form::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 50%;  height: 100%;  background: rgba(255, 255, 255, 0.08);  transform: skewX(-26deg);  transform-origin: bottom left;  border-radius: 10px;  pointer-events: none; }  .form img {  position: absolute;  top: -50px;  left: calc(50% - 50px);  width: 100px;  background: rgba(255, 255, 255, 0.8);  border-radius: 50%; }  .form h2 {  text-align: center;  letter-spacing: 1px;  margin-bottom: 2rem;  color: #ff652f; }  .form .input-group {  position: relative; }  .form .input-group input {  width: 100%;  padding: 10px 0;  font-size: 1rem;  letter-spacing: 1px;  margin-bottom: 30px;  border: none;  border-bottom: 1px solid #fff;  outline: none;  background-color: transparent;  color: inherit; }  .form .input-group label {  position: absolute;  top: 0;  left: 0;  padding: 10px 0;  font-size: 1rem;  pointer-events: none;  transition: .3s ease-out; }  .form .input-group input:focus label, .form .input-group input:valid label {  transform: translateY(-18px);  color: #ff652f;  font-size: .8rem; }  .submit-btn {  display: block;  margin-left: auto;  border: none;  outline: none;  background: #ff652f;  font-size: 1rem;  text-transform: uppercase;  letter-spacing: 1px;  padding: 10px 20px;  border-radius: 5px;  cursor: pointer; }  .forgot-pw {  color: inherit; }  #forgot-pw {  position: absolute;  display: flex;  justify-content: center;  align-items: center;  top: 0;  left: 0;  right: 0;  height: 0;  z-index: 1;  background: #fff;  opacity: 0;  transition: 0.6s; }  #forgot-pw:target {  height: 100%;  opacity: 1; }  .close {  position: absolute;  right: 1.5rem;  top: 0.5rem;  font-size: 2rem;  font-weight: 900;  text-decoration: none;  color: inherit; } 
 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" href="style.css"gt;  lt;titlegt;Login Pagelt;/titlegt; lt;/headgt;  lt;bodygt;  lt;div class="login-wrap"gt;  lt;form action="" class="form"gt;  lt;img src="avatar.png" alt=""gt;  lt;h2gt;Loginlt;/h2gt;  lt;div class="input-group"gt;  lt;input type="text" name="loginforUser" id="loginforUser" requiredgt;  lt;label for="loginforuser"gt;User Name lt;/labelgt;  lt;/divgt;  lt;div class="input-group"gt;  lt;input type="password" name="loginforPassword" id="loginforPassword" requiredgt;  lt;label for="loginforPassword"gt;Passwordlt;/labelgt;  lt;/divgt;  lt;input type="submit" value="Login" class="submit-"gt;  lt;a href="#forgotpassword" class="forgotpassword"gt;Forgot Password?lt;/agt;  lt;/formgt;  lt;/bodygt;  lt;/htmlgt;

Комментарии:

1. Просто к вашему сведению, похоже, что у вашего самого верхнего div нет соответствующего конечного тега.

2. Кроме того, единственное изображение, которое я вижу при попытке загрузить, — это avatar.png . В текущем src режиме он ищет этот файл в том же каталоге , что и ваша страница. Можете ли вы опубликовать соответствующие фрагменты своей структуры папок?

3. на самом деле я пытаюсь сосредоточиться в обоих направлениях, как бы я это сделал ?

4. Похоже, @DCR прикрыл это. Единственное, что, по-моему, не было рассмотрено, — это ваше изображение, с которым мы не сможем помочь, если вы не включите структуру папок.

Ответ №1:

у вас отсутствует тег div, и вы неправильно написали название своего класса

 * {  margin: 0;  padding: 0;  box-sizing: border-box; }  body {  background: url('imgbg1.jpg') no-repeat center;  background-size: cover;  font-family: sans-serif; }  .login-wrap {  height: 100vh;  width: 100vw;  display: flex;  justify-content: center;  align-items: center;   }  .form {  position: relative;  width: 100%;  max-width: 380px;  padding: 80px 40px 40px;  background: rgba(0, 0, 0, 0.7);  border-radius: 10px;  color: #fff;  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); }  .form::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 50%;  height: 100%;  background: rgba(255, 255, 255, 0.08);  transform: skewX(-26deg);  transform-origin: bottom left;  border-radius: 10px;  pointer-events: none; }  .form img {  position: absolute;  top: -50px;  left: calc(50% - 50px);  width: 100px;  background: rgba(255, 255, 255, 0.8);  border-radius: 50%; }  .form h2 {  text-align: center;  letter-spacing: 1px;  margin-bottom: 2rem;  color: #ff652f; }  .form .input-group {  position: relative; }  .form .input-group input {  width: 100%;  padding: 10px 0;  font-size: 1rem;  letter-spacing: 1px;  margin-bottom: 30px;  border: none;  border-bottom: 1px solid #fff;  outline: none;  background-color: transparent;  color: inherit; }  .form .input-group label {  position: absolute;  top: 0;  left: 0;  padding: 10px 0;  font-size: 1rem;  pointer-events: none;  transition: .3s ease-out; }  .form .input-group input:focus label, .form .input-group input:valid label {  transform: translateY(-18px);  color: #ff652f;  font-size: .8rem; }  .submit-btn {  display: block;  margin-left: auto;  border: none;  outline: none;  background: #ff652f;  font-size: 1rem;  text-transform: uppercase;  letter-spacing: 1px;  padding: 10px 20px;  border-radius: 5px;  cursor: pointer; }  .forgot-pw {  color: inherit; }  #forgot-pw {  position: absolute;  display: flex;  justify-content: center;  align-items: center;  top: 0;  left: 0;  right: 0;  height: 0;  z-index: 1;  background: #fff;  opacity: 0;  transition: 0.6s; }  #forgot-pw:target {  height: 100%;  opacity: 1; }  .close {  position: absolute;  right: 1.5rem;  top: 0.5rem;  font-size: 2rem;  font-weight: 900;  text-decoration: none;  color: inherit; } 
 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" href="style.css"gt;  lt;titlegt;Login Pagelt;/titlegt; lt;/headgt;  lt;bodygt;  lt;div class="login-wrap"gt;  lt;form action="" class="form"gt;  lt;img src="avatar.png" alt=""gt;  lt;h2gt;Loginlt;/h2gt;  lt;div class="input-group"gt;  lt;input type="text" name="loginforUser" id="loginforUser" requiredgt;  lt;label for="loginforuser"gt;User Name lt;/labelgt;  lt;/divgt;  lt;div class="input-group"gt;  lt;input type="password" name="loginforPassword" id="loginforPassword" requiredgt;  lt;label for="loginforPassword"gt;Passwordlt;/labelgt;  lt;/divgt;  lt;input type="submit" value="Login" class="submit-"gt;  lt;a href="#forgotpassword" class="forgotpassword"gt;Forgot Password?lt;/agt;  lt;/formgt;  lt;/divgt;  lt;/bodygt;  lt;/htmlgt;

Ответ №2:

ваше имя класса есть login-wrap , но вы написали его с ошибкой как login-wrapper . Я думаю, что проблема в названии изображения или URL-адресе. вы должны указать правильный путь к изображению.

 * {  margin: 0;  padding: 0;  box-sizing: border-box; }  body {  background: url('https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=650amp;w=940') no-repeat center;  background-size: cover;  font-family: sans-serif; }  .login-wrap {  height: 100vh;  width: 100vw;  display: flex;  justify-content: center;  align-items: center; }  .form {  position: relative;  width: 100%;  max-width: 380px;  padding: 80px 40px 40px;  background: rgba(0, 0, 0, 0.7);  border-radius: 10px;  color: #fff;  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); }  .form::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 50%;  height: 100%;  background: rgba(255, 255, 255, 0.08);  transform: skewX(-26deg);  transform-origin: bottom left;  border-radius: 10px;  pointer-events: none; }  .form img {  position: absolute;  top: -50px;  left: calc(50% - 50px);  width: 100px;  background: rgba(255, 255, 255, 0.8);  border-radius: 50%; }  .form h2 {  text-align: center;  letter-spacing: 1px;  margin-bottom: 2rem;  color: #ff652f; }  .form .input-group {  position: relative; }  .form .input-group input {  width: 100%;  padding: 10px 0;  font-size: 1rem;  letter-spacing: 1px;  margin-bottom: 30px;  border: none;  border-bottom: 1px solid #fff;  outline: none;  background-color: transparent;  color: inherit; }  .form .input-group label {  position: absolute;  top: 0;  left: 0;  padding: 10px 0;  font-size: 1rem;  pointer-events: none;  transition: .3s ease-out; }  .form .input-group input:focus label, .form .input-group input:valid label {  transform: translateY(-18px);  color: #ff652f;  font-size: .8rem; }  .submit-btn {  display: block;  margin-left: auto;  border: none;  outline: none;  background: #ff652f;  font-size: 1rem;  text-transform: uppercase;  letter-spacing: 1px;  padding: 10px 20px;  border-radius: 5px;  cursor: pointer; }  .forgot-pw {  color: inherit; }  #forgot-pw {  position: absolute;  display: flex;  justify-content: center;  align-items: center;  top: 0;  left: 0;  right: 0;  height: 0;  z-index: 1;  background: #fff;  opacity: 0;  transition: 0.6s; }  #forgot-pw:target {  height: 100%;  opacity: 1; }  .close {  position: absolute;  right: 1.5rem;  top: 0.5rem;  font-size: 2rem;  font-weight: 900;  text-decoration: none;  color: inherit; } 
 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" href="style.css"gt;  lt;titlegt;Login Pagelt;/titlegt; lt;/headgt;  lt;bodygt;  lt;div class="login-wrap"gt;  lt;form action="" class="form"gt;  lt;img src="avatar.png" alt=""gt;  lt;h2gt;Loginlt;/h2gt;  lt;div class="input-group"gt;  lt;input type="text" name="loginforUser" id="loginforUser" requiredgt;  lt;label for="loginforuser"gt;User Name lt;/labelgt;  lt;/divgt;  lt;div class="input-group"gt;  lt;input type="password" name="loginforPassword" id="loginforPassword" requiredgt;  lt;label for="loginforPassword"gt;Passwordlt;/labelgt;  lt;/divgt;  lt;input type="submit" value="Login" class="submit-"gt;  lt;a href="#forgotpassword" class="forgotpassword"gt;Forgot Password?lt;/agt;  lt;/formgt;  lt;/bodygt;  lt;/htmlgt;
Метки: