[英]How center login card on Framework7?
I'd like to center the login card, but I connot do it.我想将登录卡居中,但我不能这样做。 At the moment the card stays on the top of the page.
目前,卡片停留在页面顶部。 I wrote this class.
我写了这个类。
.card-center {
margin-left: auto;
margin-right: auto;
}
but it did not solve the issue... I also tryed to use align-content-center class但它没有解决问题......我也尝试使用 align-content-center 类
This is my login page这是我的登录页面
<div data-name="login" class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content ">
<form id="form-login">
<div class="row justify-content-center">
<div class="col-100 tablet-80 desktop-50 ">
<div class="card head-card-forest card-center">
<div class="card-header">
<span></span><h2>Login</h2><span></span>
</div>
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<div class="row">
<a class="col button button-fill" id="button-login" onclick="login()"> Login </a>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--.card-->
</div><!--.col-->
</div><!--.row-->
</form>
</div> <!-- ./ page-content -->
Thank you in advance for your help!预先感谢您的帮助!
Since you don't provide any code, I can only assume and provide you a solution that should work由于您没有提供任何代码,我只能假设并为您提供一个应该有效的解决方案
.tablet-80.desktop-50{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Note: I tested this code with framework7 demo login page see image below注意:我使用 framework7 演示登录页面测试了此代码,请参见下图
This below code make the form proper center of the page.下面的代码使表单正确地居于页面的中心。
#form-login{
width:300px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.