Question

我正试图用离子形式制作一个表格。我希望在屏幕中央显示该表格。任何人都可以帮我吗？

这是我的代码：

我-form.html：

<ion-header>
<ion-navbar>
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>My First Form</ion-title>
</ion-navbar>
</ion-header>
 <ion-content padding>
      <h3 ion-text text-center color="primary">My Form</h3>

      <ion-list inset class="ilist">

          <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>

          <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>

    </ion-list>

    <div padding>
        <button ion-button color="primary" block>Sign In</button>
    </div>

  </ion-content>

我-form.scss

page-my-form{
.ilist{
    justify-content: center;
    align-items: center!important;
    }
}

Answer 1

如果你想在中心使用离子元素，那么我会为你提供一些代码。

您需要更改HeaderComponent.html:11 ERROR TypeError: this.chartProgressService.getUnit is not a function at ChartProgressComponent.ngOnInit (chart-progress.component.ts:33) at checkAndUpdateDirectiveInline (core.js:12369) at checkAndUpdateNodeInline (core.js:13893) at checkAndUpdateNode (core.js:13836) at debugCheckAndUpdateNode (core.js:14729) at debugCheckDirectivesFn (core.js:14670) at Object.eval [as updateDirectives] (HeaderComponent.html:11) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14655) at checkAndUpdateView (core.js:13802) at callViewAction (core.js:14153)

.scss

如果你只想在中心使用表单元素，那么它需要一些技巧。如果需要我也解决它..

需要更改.scroll-content { align-items: center; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }

.html

还需要更改<div class="row styling-row" > <div class="col" text-center> <h3 color="primary">My Form</h3> </div> </div> <div class="row header"> <div class="col" text-center> <ion-list inset> <ion-item> <ion-label floating>Username</ion-label> <ion-input type="text" value=""></ion-input> </ion-item> <ion-item> <ion-label floating>Password</ion-label> <ion-input type="password"></ion-input> </ion-item> </ion-list> </div> </div> <div class="row styling-row"> <div class="col" text-center> <button ion-button color="primary" block>Sign In</button> </div> </div> </section>文件

.scss

Answer 2

我使用离子网格

获得了它

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col text-center>
        <Your FORM CONTROLS>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

对于垂直中心，您应该添加网格样式

ion-grid {
    height: 100%;
    justify-content: center;
}

在离子中心对齐形状

2 个答案: