离子项目内部的SCSS样式（离子框架）

Question

我正在努力使样式正确。我认为这和各种离子标签的样式层次有关，但我不确定。

在我的应用程序中，我正在尝试将一些

我尝试了各种样式和类别来将按钮居中。我在层次结构的每一个层次上都尝试过它们（在离子项、网格、行、列、标签、按钮、按钮层次），但我一直得到相同的结果。

下面是项目的结构。在这个迭代中，您可以看到我试图在行级别使用文本中心属性：

<ion-item>
  <ion-grid>
    <ion-row text-center>
      <ion-col size="6">
        <ion-label>
          <ion-buttons>
            <ion-button> Problem? </ion-button>
          </ion-buttons>
        </ion-label>
      </ion-col>
      <ion-col size="6">
        <ion-label>
          <ion-buttons>
            <ion-button>More</ion-button>
          </ion-buttons>
        </ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-item>

我读过scss样式上的离子留档，但是他们没有讨论像离子项目内部的网格这样的嵌套项目。

我怀疑一些元素的造型凌驾于我试图将按钮放在这里的尝试之上，我需要理解造型层次结构的基本原理。学这个有地方去吗？

我已经包括了全部。scss文件供参考，但我怀疑我缺少一个原则：

.ios,
.md {
  page-home {
    #container {
      text-align: left;

      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    #container strong {
      font-size: 20px;
      line-height: 26px;
    }

    #container p {
      font-size: 16px;
      line-height: 22px;

      color: #8c8c8c;

      margin: 0;
    }

    #container a {
      text-decoration: none;
    }

    ion-item {
      padding-top: 0.5rem;
    }

    .center-button {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-item: center;
    }

    ion-col {
      text-align: left;
    }

    ion-label {
      font-weight: bold;
    }

    ion-title {
      font-size: 1.5rem;
    }

    .item-name {
      font-size: 2rem;
    }
  }
}

谢谢




Answer 1

这不是解决问题的正确方法，但这就是我最终所做的：我只是将样式信息内联到HTML中。下面是一个例子：

      <ion-row style="width: 100%; text-align: center">
        <ion-item style="width: 100%; text-align: center">
          <ion-col size="4" style="align-content: center">
            <ion-buttons style="width: 100%; text-align: center">
              <ion-button
                style="width: 100%; text-align: center"
                (click)="onClickProblem('button', item.name)"
              >
                Problem?
              </ion-button>
            </ion-buttons>
          </ion-col>
          <ion-col
            size="4"
            style="width: 100%; text-align: center"
            *ngIf="item.notes"
          >
            <ion-buttons style="width: 100%; text-align: center">
              <ion-button
                style="width: 100%; text-align: center"
                (click)="onClickMore('button', item.notes)"
                >More</ion-button
              >
            </ion-buttons>
          </ion-col>

您可以看到整个“宽度： 100%；文本对齐：中心”。这不是最容易维护的解决方案，但它让我摆脱了毫无进展的炼狱。

Answer 2

您可以通过将这两个css属性添加到ion标签来实现这一点

display: flex;
justify-content: center;