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

Question

我在离子中有以下内容。

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

输出如下：

我是离子的新手，非常感谢

中的一些帮助

1）用户名和密码

的两行之间的空格

2）将用户名和密码行左侧对齐一点，以便Login行看起来居中。

Answer 1

为什么不使用内嵌标签？

要将所有标签对齐到中心，请将文本中心类添加到标签中。

<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类。不要在原始离子css文件中执行此操作 - 创建另一个样式表以包含所有覆盖。