具有列偏移量的离子网格对齐行和列

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>

要居中对齐“Login”标签，请将text-center仅添加到该标签

<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>

要在项之间添加空格，请在.input-label类中添加边距-底部。不要在原始的离子css文件中这样做-创建另一个样式表来包含所有覆盖。