如何使场中心对齐(在中心)在离子+角

我正在尝试使登录屏幕如图所示。我能够设置背景图像，输入字段和按钮，但我面临一些问题

我的输入字段的宽度是整个宽度
如何在图像中显示垂直对齐和水平对齐(输入字段，徽标，按钮在中心)。
我们可以给按钮宽度相同的输入宽度，如图

是我的代码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 Grid System完成水平和垂直居中: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;
}

相关内容

最新更新

热门标签：