ionic-framework - ionic 网格对齐行和列并具有列偏移

Question

我有以下 ionic 内容。

  <ion-content>
  <div class="row row-center">
    <div class="col-150 col-offset-50"><h4>Login</h4></div> </div>
    <div class="row">
    <div class=" col-10 col-offset-50"><h4>Username</h4></div>
    <div class=" col-10 col-offset-5"><label class="item item-input">   
    <input type="text" placeholder="Username" ng-model="username">  
    </label></div> 
    </div>
    <div class="row row-bottom">
    <div class=" col-10 col-offset-50"><h4>Password</h4></div>
    <div class=" col-10 col-offset-5"><label class="item item-input">  
    <input type="password" placeholder="Password" ng-model="password">  
    </label>
    </div> 
    </div>
    </ion-content>

输出如下所示:

我是 ionic 新手，非常感谢一些帮助

1)用户名和密码两行之间有空格

2)将用户名和密码行稍微向左对齐，以便登录行看起来居中。

Answer 1

为什么不使用内联标签？

要将所有标签居中对齐，请将 text-center 类添加到标签中。

<ion-content>
  <div class="list">
    <label class="item item-input">
      <span class="input-label text-center">Login</span>
    </label>
    <label class="item item-input">
      <span class="input-label text-center">Username</span>
      <input type="text">
    </label>
    <label class="item item-input">
      <span class="input-label text-center">Password</span>
      <input type="password">
    </label>
  </div>
</ion-content>

要仅居中对齐“登录”标签，请将文本中心添加到该标签

<ion-content>
  <div class="list">
    <label class="item text-center">
      Login
    </label>
    <label class="item item-input">
      <span class="input-label">Username</span>
      <input type="text">
    </label>
    <label class="item item-input">
      <span class="input-label">Password</span>
      <input type="password">
    </label>
  </div>
</ion-content>

要在项目之间添加空间，请将 margin-bottom 添加到 .input-label 类。不要在原始 ionic css 文件中执行此操作 - 创建另一个样式表来包含所有覆盖。