Question

我正在尝试按照图像显示登录屏幕。我可以设置背景图像，输入字段和按钮。但我面临的问题很少

我的输入字段宽度占整个宽度。
如图中所示，如何将垂直对齐和水平对齐居中（输入字段，徽标，按钮位于中心）。
我们可以给出与输入宽度相同的按钮宽度，如图像

这是我的代码 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>

Answer 1

工作示例：http://plnkr.co/edit/omDgW8KXGoaBBsOrFpXw?p=preview

使用离子网格系统完成水平和垂直居中：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;
}

如何使字段居中对齐（在中心）离子+角度

1 个答案: