定位表單和多個圖像

我在垂直和水平方向上居中放置一個表單，我已經設置了水平居中表單，但無法設置垂直居中而不導致表單和圖像重疊。在頁面底部還有多個圖片橫向居中的問題。定位表單和多個圖像

.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>

該解決方案是充分響應。我讓所有三個孩子的彈性值爲1，以使它們具有相同的高度（100％/ 3（以彈性值計）= 33.33％，即flex：1 = 33.33％）。如果你想要，你可以給每個孩子一個不同的值，例如#container > .banner {flex: 1;}#container > #loginForm {flex: 2;}#container > .images {flex: 3;}或任何其他數字（也可以使用小數），看看他們如何迴應。

您可以根據需要調整彈性值以獲得所需結果，但請注意.banner和.images的不同值會導致#loginForm不在屏幕上垂直居中。另請注意，如果彈性商品內的內容（img's）的原始height在某個點上大於商品本身的height，那麼這將影響彈性商品height。

來源

2017-10-05 19:42:40 VXp

定位表單和多個圖像

回答

相關問題