时间戳

首页 > 解决方案 > 如何将 Ionic Page 上的元素移动到中心？

angular - 如何将 Ionic Page 上的元素移动到中心？

问题描述

我正在为我的网站开发主页并想更改一些格式，但我不确定如何执行此操作。

这是我的代码。基本上，我希望视频位于中心并跨越以匹配下面的区域与内置。

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      PC Builder Bot - Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-title center> PC Builder Bot </ion-title>
    <iframe width="420" height="315" center
      src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
    </iframe>
  <ion-grid fixed>
    <ion-row class="ion-justify-content-center">
      <ion-col size="12">
        <ion-row>
          <ion-col size="12">
            <ion-button color="primary" class="ion-float-right" (click)="openAddBuildPage()">
                Add Your Own Build?
            </ion-button>
          </ion-col>
        </ion-row>       
        <ion-title>These are Builds We have done for you! </ion-title>
        <ion-list>
          <ion-item *ngFor="let Build of buildList" button (click)="openBuildDetailsPage(Build.id)">
            {{Build.id}}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

这就是主页现在的样子。

任何帮助表示赞赏！谢谢！

标签： angularionic-framework

解决方案

也许尝试将 iframe 添加到您的ion-grid.

<ion-grid fixed>
    <ion-row class="ion-justify-content-center">
      <ion-col size="12">
         <ion-title class="ion-float-left"> PC Builder Bot </ion-title>
         <iframe width="420" height="315"
            src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
         </iframe>
      </ion-col>
      <ion-col size="12">
        <ion-row>
          <ion-col size="12">
            <ion-button color="primary" class="ion-float-right" (click)="openAddBuildPage()">
                Add Your Own Build?
            </ion-button>
          </ion-col>
        </ion-row>       
        <ion-title>These are Builds We have done for you! </ion-title>
        <ion-list>
          <ion-item *ngFor="let Build of buildList" button (click)="openBuildDetailsPage(Build.id)">
            {{Build.id}}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

推荐阅读