我正在尝试制作如图所示的登录屏幕。我可以设置背景图像、输入字段和按钮。但我遇到了一些问题
- 我的输入字段宽度占用整个宽度。
- 如何将垂直对齐和水平对齐居中，如图所示(输入字段、 Logo 、按钮位于中心)。
- 我们可以让按钮宽度与输入宽度相同，如图所示
这是我的代码 http://plnkr.co/edit/MeweflpWLXZ8b4KJolu3?p=preview
<div class="bg">
<div class="logo">
<img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
<input class="user_inputfield" type="text" placeholder="Username">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
<input class="password_inputfield" type="password" placeholder="Password">
</label>
</div>
<div style="text-align:center;">
<button class="button button-calm" style="width:40%">
Login</button>
</div>
</div>
</div>
最佳答案
工作示例:http://plnkr.co/edit/omDgW8KXGoaBBsOrFpXw?p=preview
使用 ionic 网格系统完成水平和垂直居中:http://www.gajotres.net/ionic-framework-series-14-grid-system/
HTML:
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Popover</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="bg">
<!-- <div class="row">
</div>-->
<div class="row" style="height: 33.3%;">
</div>
<div class="row row-center">
<div class="col-33"></div>
<div class="col-33 test">
<div class="logo">
<img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
<input class="user_inputfield" type="text" placeholder="Username">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
<input class="password_inputfield" type="password" placeholder="Password">
</label>
</div>
<div style="text-align:center;">
<button class="button button-calm" style="width:95%;">
Login</button>
</div>
</div>
</div>
<div class="col-33"></div>
</div>
<div class="row row-bottom">
</div>
</body>
</html>
CSS:
/* Styles go here */
.bg {
width: 100%;
height: 100%;
background-image: url("https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0");
}
.username_icon {
width: 48px;
height: 48px;
}
.password_icon {
width: 48px;
height: 48px;
}
.user_inputfield,
.password_inputfield {
padding-left: 15px!important;
}
.logo img {
display: block;
height: 50px;
margin: 0 auto;
}
关于javascript - 如何使字段在 ionic + Angular 中居中对齐(在中心)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31616007/