當前頁面如下所示：
如您所見，頂部有很多空白區域。我似乎無法弄清楚如何讓那個空白區域消失。這是 HTML：
<div className="auth-form-container" style={{display: 'flex', justifyContent:'center', alignItems:'center', height: '100%'}}>
<img src={logo} alt="VaporCode Logo"></img>
<h2 style={{ color: 'white' }}>Register</h2>
<form className="register-form" onSubmit={handleSubmit}>
<label htmlFor="firstname" style={{ color: 'white' }}>First Name</label>
<input value={firstname} firstname="firstname" id="firstname" placeholder="First Name" />
<label htmlFor="lastname" style={{ color: 'white' }}>Last Name</label>
<input value={lastname} lastname="lastname" id="lastname" placeholder="Last Name" />
<label htmlFor="email" style={{ color: 'white' }}>Email</label>
<input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="Email" id="email" name="email" />
<label htmlFor="username" style={{ color: 'white' }}>Userame</label>
<input value={username} username="username" id="username" placeholder="Username" />
<label htmlFor="password" style={{ color: 'white' }}>Password</label>
<input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="Password" id="password" name="password" />
<label htmlFor="repeatpassword" style={{ color: 'white' }}>Retype Password</label>
<input value={reppass} onChange={(e) => setrepPass(e.target.value)} type="password" placeholder="Retype Password" id="repeatpassword" nam>
<button type="submit">Register</button>
</form>
<linkbutton className="link-btn" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.</linkbutton>
<div style={{ display: "flex", justifyContent: "center" }}>
<iframe src="https://www.guilded.gg/canvas_index.html?route=/canvas/embed/badge/4R5YgKWR" width="294" height="48" frameborder="0">
</div>
</div>
請注意，由于某些函式很長，代碼沒有正確復制，因為我是通過 SSH 編程的。如果有人有更好的解決方案，將不勝感激。（我正在運行沒有 ui 的 vps）這是 CSS：
App {
text-align: center;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
color: #000000;
background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}
.auth-form-container, .login-form, .register-form {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 600px) {
.auth-form-container {
position:absolute;
justify-content: center;
padding: 1rem;
border: solid #222222;
background-color: #000000;
fill: solid #000000;
border-radius: 10px;
margin:30rem;
}
}
label {
text-align: left;
padding: 0.25rem 0;
}
input {
margin: 0.5rem 0;
padding: 1rem;
border: none;
border-radius: 10px;
}
button {
border: none;
background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
padding: 20px;
border-radius: 10px;
cursor: pointer;
color: #ffffff;
font-weight : bold;
transition-duration: 2s;
}
linkbutton {
border: none;
padding: 20px;
border-radius: 10px;
cursor: pointer;
color: #ffffff;
}
.link-btn {
background: none;
color: white;
text-decoration: underline;
}
img {
margin: 0 auto;
max-width: 10%;
height: 10%;
}
我在 react.js 中對此進行編程。
我試著強制位置是絕對的，但它使頁面在較小的螢屏上看起來很不穩定。最后我希望登錄容器靠近螢屏頂部。請記住，我不希望它出現在 CSS 中，如果可能的話，我希望它出現在 HTML 中。
另外，如果有人有關于不通過 ssh 進行遠程編程的建議，請聯系我！;)
-謝謝！:)
uj5u.com熱心網友回復：
如果您使用 flexbox 和App選擇器將內容居中，然后將.auth-form-containera設定height: 100%為將填充整個容器高度，那么30remmargin-top 可以被消除。試試這個，如果它不起作用，請附上一個作業片段，以便我們可以看到真正的問題。希望能幫助到你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/533961.html
標籤：网页格式CSS反应网络