>

키보드 단축키를 사용하여 창을 화면의 왼쪽/오른쪽으로 이동 한 다음 위/아래로 최소화하면됩니다. 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="&emsp;Email or phone or username"><br><br>
            <input class="input" type="password" name="pass" placeholder="&emsp;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?&emsp;<a href="#">Sign Up</a></p>
        </form>  
    </div>
</body>

실제 결과, 키보드를 사용하여 왼쪽/오른쪽 + 위/아래 모서리로 창 크기를 조정할 때 창을 스크롤하는 옵션이 있으며 필요하지 않으며 흰색 div  완전히 표시되지 않으며 아래로 스크롤하여 표시해야합니다. 또 다른 문제는 흰색 div 입니다  창 크기를 조정하면 중앙에 표시되지 않습니다.

예상 결과에서 흰색 div  마우스를 사용하여 크기를 조정하면 흰색 div 가 전체 페이지의 최소 크기가됩니다.  창 크기가 div 만 표시되므로 더 작아 질 수 없을 때까지 항상 중앙에 있습니다. . 키보드를 사용하여 페이지 크기를 조정합니다. 그런 다음 div 를 원한다  항상 완전히 표시되고 중앙에 위치합니다.

  • 답변 # 1

    flexbox를 사용하여 간단하고 정확하게 만들 수 있습니다. 아래 코드는 시작하는 데 도움이됩니다. :)

    body {
      background-image: url('http://placehold.it/600x400/fff000');
      background-size: cover;
      background-repeat: no-repeat;
      resize: initial;
      font-family: Arial;
      /* Using Display Flex*/
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
    .white-container {
      width: 28em;
      height: 28em;
      background-color: white;
    }
    h1 {
      padding-top: 2em;
      text-align: center;
      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%;
    }
    
    

    <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="&emsp;Email or phone or username"><br><br>
        <input class="input" type="password" name="pass" placeholder="&emsp;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?&emsp;<a href="#">Sign Up</a></p>
      </form>
    </div>
    
    

  • 답변 # 2

    margin:0 auto 를 사용할 수 있습니다  와이즈 비즈  그 white-container 를 유지하기 위해  화면 크기에 상관없이 중심으로;

    div
    
    

    body {
        background-image: url(../images/website-login-background.jpg);
        background-size: initial;
        background-repeat: no-repeat;
        resize: initial;
        font-family: Arial;
    }
    .white-container {
        margin: 0 auto;
        /* 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%;
    }
    
    

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="js_formname_formelementname.css"> </head> <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="&emsp;Email or phone or username"><br><br> <input class="input" type="password" name="pass" placeholder="&emsp;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?&emsp;<a href="#">Sign Up</a></p> </form> </div> </body> </html>

  • 이전 javascript - setBackgroundMessageHandler에서 데이터를 저장할 수 없습니다
  • 다음 xamarin - xaml - fontsize를 컨트롤 높이에 바인딩