Как переместить элементы на странице Ioni c в центр?

Question

Я разрабатываю домашнюю страницу для своего сайта и хочу изменить форматирование, но я не уверен, как это сделать.

Вот мой код. По сути, я хочу, чтобы видео было по центру и по размеру, чтобы соответствовать области ниже со строками.

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

Вот так выглядит домашняя страница.

Любая помощь приветствуется! Спасибо!

Answer 1

Возможно, попробуйте добавить 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>