定位表单和多个图像

我在垂直和水平方向上居中放置一个表单，我已经设置了水平居中表单，但无法设置垂直居中而不导致表单和图像重叠。在页面底部还有多个图片横向居中的问题。定位表单和多个图像

.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

定位表单和多个图像

回答

相关问题