使离子内容（或文本或标签）垂直居中

Question

我想实现这样的目标：

但我目前正处于那个阶段

请注意，第一张图片是 bootstrap 形式，第二张图片是我用 ionic 设计的 [有一些原因我不想在我的 ionic 项目中拖 bootstrap，所以，显然一切都不会 100% 完美，但我想得到更接近它的东西]

我的问题是：

如何将项目名称设置为垂直居中？ [见第二张图，我已经试过了 justify-content-center && align-items-center ]
如何将 项目名称 的文本与 Apple 对齐（如第一张图片） [我试过 class="ion-float-left" 但似乎我是否给它，在第二张图片中，项目名称保持不变，如果我将整个 ion-row （见代码）放在 ion-list 下，看起来很可怕]

这是我的离子代码

产品-list.page.html

<ion-header>
  <ion-toolbar color="primary" class="ion-text-center">
    <ion-title>Stock</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button (click)=onBackButtonPressed() color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list *ngIf="currentList">
              <ion-item *ngFor="let item of currentList" (click)="setIonList(item)">
                {{item}}
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

我不使用 Ionic，但通常人们会 this 在 CSS 中将一些文本垂直居中对齐：

{
    display: table-cell;
    vertical-align: middle;
}

或

{
    line-height: 50px;  /* assuming the height of the element is 50px */
}

您也可以考虑 'padding-top' 属性，它不像上面那样自动。

2。只需使用 margin-left，例如：

{ margin-left: 1vw; }

Answer 2

将 <ion-grid> 包裹在 <div> 下并在 div 处使 height: 100% （您需要垂直居中，因此包裹应为 100%），然后 display: flex; align-items: center; justify-content: center;
我正在用 <div> 影响 <ion-grid>，确保

除 <div>

<ion-grid>

您的 <div> 未受其他因素影响

否则，您可能需要不同的实现方式。

终于看起来像了:

这里是代码：

  <ion-grid>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card>
          <ion-card-header>
            <ion-card-title>

            </ion-card-title>
          </ion-card-header>
          <ion-card-content>

            <ion-row class="background1 justify-content-center align-items-center" style="height: 100%" >
              <ion-col>
                <ion-text class="ion-float-left" style="font-size: 12px; font-weight: bold; ">Item Name</ion-text>
              </ion-col>
              <ion-col>
                <ion-button  color="secondary" class="ion-float-right" size="small">
                  Back
                </ion-button>
              </ion-col>
            </ion-row>
            
            <ion-list >
              <ion-item>
                <ion-text>Hi</ion-text>
              </ion-item>
              <ion-item>
                <ion-text>Hello</ion-text>
              </ion-item>
            </ion-list>

          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>


</div>

学分：

从 Ionic 论坛，我得到了这个问题的帮助：

https://forum.ionicframework.com/t/ion-card-center-alignment/170521/8

在那里查看 saad-ansari 的回复。

使离子内容（或文本或标签）垂直居中

Make ion content (or text or label) vertically center

html

css

ionic-framework

angular

ionic4