我试图将我的登录和注册面板对齐在屏幕的中间。如果我从PC和检查菜单中检查它,它工作正常,你可以选择任何手机,看看它是否工作正常。我想从我真正的手机上检查它,但这是我得到的。图像这是PC上检查菜单的样子。image2
我使用的代码。
<div class="wrapper2" style="font-size: 24px;">
<h2>Bejelentkezés</h2>
<p style="padding-bottom: 30px;">Kérem töltse ki az alábbi mezőket.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<label>Felhasználónév/Email cím</label>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
<span class="help-block" style="color: red;"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<label>Jelszó</label>
<input type="password" name="password" class="form-control">
<span class="help-block" style="color: red;"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Bejelentkezés">
</div>
<div class="plus" style="font-size: 18px;">
<p>Még nem regisztrált? <a href="register.php">Regisztráció</a></p>
<p>Elfelejtette jelszavát? <a href="password-reminder.php">Jelszó emlékeztető</a></p>
</div>
</form>
</div>
还有CSS
.wrapper2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 18px sans-serif;
text-align: center;
}
猜测由div的css与 class
.wrapper2
我想你是想把这个div的位置与它的父div垂直居中,并使用类 .main-panel
因此,我检查了你提供的现场链接的div的CSS,它是100%(我想你想这是等于设备视口的高度),所以你可以实现这一点,通过设置的 min-height:100vh;
对于这个div,就像
.perfect-scrollbar-on .main-panel {
height: 100%;
max-height: 100%;
min-height: 100vh;
}
希望这能解决你的问题。