フォームと複数の画像の配置

私はフォームを縦と横にセンタリングすることに問題があります。私はフォームを水平方向に集中させることができましたが、フォームとイメージが重ならずに垂直方向にセンタリングすることもできません。また、ページの下部に複数の画像を水平に配置する問題もあります。フォームと複数の画像の配置

.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人すべての子供に同じ高さ（フレックス値で100％/ 3 = 33.33％、すなわちフレックス：1 = 33.33％）を作るために1のフレックス値を与えました。もしあなたが望むならば、各子供に異なる値を与えることができます。 #container > .banner {flex: 1;}#container > #loginForm {flex: 2;}#container > .images {flex: 3;}または他の数字（小数点以下も使用できます）とそれらがどのように応答するかを確認してください。

あなたは望ましい結果を得るためにあなたのニーズにフレックスの値を調整することができますが、縦画面の中央に配置されていない#loginFormに.bannerと.images結果のために、異なる値に注意してください。また、フレックスアイテム内のコンテンツ（img's）の元のheightが、アイテム自体のheightより大きい場合は、フレックスアイテムheightに影響します。

出典

2017-10-05 19:42:40 VXp

フォームと複数の画像の配置

答えて

関連する問題