양식 및 여러 이미지 위치 지정

양식을 세로 및 가로로 가운데에 넣는 데 문제가 있습니다. 양식을 가로로 중앙 관리 할 수 있지만 양식과 이미지가 겹치지 않고 세로로 가운데에 배치 할 수도 없습니다. 또한 페이지 하단에 여러 이미지를 가로로 배치하는 데 문제가 있습니다.양식 및 여러 이미지 위치 지정

.banner { 
 
    position: relative; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #595959; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 25px; 
 
    padding-top: 50px; 
 
} 
 

 
#imagesMain { 
 
    position: relative; 
 
    max-width: 75rem; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    bottom: 0; 
 
    padding: 0; 
 
    margin: 20px auto; 
 
    text-align: center; 
 
} 
 

 
#imagesMain a { 
 
    width: 30%; 
 
    float: left; 
 
    position: relative; 
 
    margin: 1.5%; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    margin-right: 25px; 
 
    position: relative; 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    vertical-align: middle; 
 
} 
 

 
#form { 
 
    display: table; 
 
    margin: 0 auto; 
 
}

<!DOCTYPE html> 
 

 
<body> 
 
    <div class="banner"> 
 
    <h1>A-Level Revision Website</h1> 
 
    </div> 
 
    <div id="form"> 
 
    <form id="loginForm"> 
 
     <input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br> 
 
     <input type="password" class="login-password" required="true" placeholder="Password" /><br> 
 
     <input type="submit" name="Login" value="Login" class="login-submit" /><br> 
 
     <a href="#" class="login-forgot-pass">forgot password?</a> 
 
    </form> 
 
    </div> 
 
    <div id="imagesMain"> 
 
    <a href="Maths.html"> 
 
\t \t \t <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths""> 
 
\t \t </a> 
 
    <a href="ComputerScience.html"> 
 
     <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience"> 
 
    </a> 
 
    <a href="Physics.html"> 
 
\t \t \t <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics""> 
 
\t \t </a> 
 
    </div> 
 

 
    </html>

출처

2017-10-04 user7808079

전체 페이지 중앙에 로그인 양식을 세로 및 가로로 가운데에 배치하고 이미지를 페이지 하단에 가로로 가운데에 배치합니다. – user7808079

당신은 Flexbox과 같은 것을 할 수 있습니다

* {margin:0;padding:0;box-sizing:border-box} 
 
body, html {width:100%;height:100%} 
 

 
#container { 
 
    display: flex; /* flexible or responsive */ 
 
    flex-direction: column; /* stacks children vertically */ 
 
    width: 100vw; /* 100% of the viewport width */ 
 
    height: 100vh; /* 100% of the viewport height */ 
 
    /* using vw & vh = full screen all the time (no scroll-bars) or until elements fixed sizes get affected */ 
 
} 
 

 
#container > .banner, 
 
#container > #loginForm, 
 
#container > .images { 
 
    flex: 1; 
 
} 
 

 
/* Another example: 
 
#container > .banner {flex: 1;} 
 
#container > #loginForm {flex: 2;} Means that it takes twice as much space as .banner and .images (100%/4 (in flex values) = 25%, i.e. flex: 1 = 25%). 
 
#container > .images {flex: 1;} 
 
*/ 
 

 
#container > .banner { 
 
    display: flex; 
 
    justify-content: center; /* horizontal alignment */ 
 
    align-items: center; /* vertical alignment */ 
 
    text-align: center; 
 
    background: #595959; 
 
    color: #fff; 
 
    font-family: 'Lato', sans-serif; 
 
    font-size: 25px; 
 
} 
 

 
#container > #loginForm { 
 
    display: flex; /* also given flex properties */ 
 
    flex-direction: column; /* stacks the login form elements vertically */ 
 
    justify-content: center; /* aligns the form horizontally */ 
 
    align-items: center; /* aligns the form vertically */ 
 
    margin: 10px 0; 
 
} 
 

 
#container > #loginForm > input { 
 
    margin-bottom: 5px; 
 
    padding: 5px; 
 
} 
 

 
#container > .images { 
 
    display: flex; /* also given flex properties */ 
 
    justify-content: center; /* aligns images horizontally */ 
 
    align-items: flex-end; /* aligns images at the bottom */ 
 
    padding: 10px 5px; /* for better presentation */ 
 
    background: #595959; /* for better presentation */ 
 
} 
 

 
#container > .images > a { 
 
    margin: 0 5px; 
 
} 
 

 
#container > .images > a > img { 
 
    display: block; 
 
    width: auto; 
 
    height: auto; 
 
    max-width: 100%; 
 
}

<div id="container"> 
 
    <div class="banner"> 
 
    <h1>A-Level Revision Website</h1> 
 
    </div> 
 
    <form id="loginForm"> 
 
    <input type="email" class="login-username" placeholder="E-mail" autofocus="true" required> 
 
    <input type="password" class="login-password" placeholder="Password" required> 
 
    <input type="submit" class="login-submit" name="Login" value="Login"> 
 
    <a href="#" class="login-forgot-pass">Forgot password?</a> 
 
    </form> 
 
    <div class="images"> 
 
    <a href="Maths.html"><img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths"></a> 
 
    <a href="ComputerScience.html"><img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience"></a> 
 
    <a href="Physics.html"><img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics"></a> 
 
    </div> 
 
</div>

이 솔루션은 완전히 반응이다. 3 명의 자녀 모두에게 1의 굴곡 값을 주어 동일한 높이 (100 %/3 (굴곡 값에서) = 33.33 %, 즉 굴곡 : 1 = 33.33 %)로 만듭니다. 원하는 경우 각 자녀에게 다른 값을 줄 수 있습니다. #container > .banner {flex: 1;}#container > #loginForm {flex: 2;}#container > .images {flex: 3;} 또는 다른 숫자 (십진수도 사용할 수 있음)와 어떻게 반응하는지보십시오.

당신이 원하는 결과를 얻기 위해 여러분의 필요에 플렉스 값을 조정할 수 있지만, 수직으로 화면의 중앙에되지 #loginForm에 .banner 및 .images 결과를 서로 다른 값을 유의하시기 바랍니다. 또한 flex 항목의 내용 (img 's)의 원래 height이 항목 자체의 height보다 큰 경우 플렉스 항목 height에 영향을줍니다.

출처

2017-10-05 19:42:40 VXp

답변

관련 문제