当前页面如下所示: 正如您所看到的,顶部有很多空白区域。我似乎不知道如何让那个空白消失。这是 HTML:
![]()
Register
props.onFormSwitch('login')}>Already have an account? Login here.
请注意,由于某些函数很长,因此由于我通过 SSH 进行编程,因此代码无法正确复制。如果有人有更好的解决方案,将不胜感激。 (我正在运行一个没有用户界面的 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 进行远程编程的建议,请联系我! ;)
-谢谢! :)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
如果您使用flexbox居中内容,使用
App选择器,然后将.auth-form-container设置为具有height:100%将填充整个容器高度,因此30remmargin-top可能是被淘汰。尝试一下,如果它不起作用,请附加一个工作片段,以便我们可以看到真正的问题。希望对您有帮助!