将工具栏内的文本向右对齐

Question

我正在尝试将图像和文本与标题的左右对齐，就像它们是导航按钮一样。 即使使用丑陋的 !important 标记编辑 CSS，这也无法按预期工作。 希望你能帮助我。

我正在运行 Ionic 5.2.7 并使用 Ionic lab 来可视化我的应用程序。

<ion-header>
  <ion-toolbar color="primary">
    <ion-title text-center>
      %name%
    </ion-title>
    <ion-text>
      <img src="/assets/star.svg" class="rep-icon" />
      <div class="rep">%rep%</div>
    </ion-text>
    <ion-text>
      <img src="/assets/star.svg" class="coins-icon" />
      <div class="coins">%$%</div>
    </ion-text>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card>
    <img src="/assets/shapes.svg" alt="" />
    <ion-card-header>
      <ion-card-subtitle>hh:mm dd MM</ion-card-subtitle>
      <ion-card-title>Title</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        commodo orci in dapibus efficitur. Pellentesque nisi urna, dictum non
        rhoncus ac, tempus eu augue...
      </p>
    </ion-card-content>
  </ion-card>
</ion-content>

这就是结果。 https://prnt.sc/p547nl 提前致谢

Answer 1

我认为你应该坚持使用 Ionic 的组件，你可以通过这样做来实现这一点

<ion-header>
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-button color="light">
                <ion-icon name="star"></ion-icon>
                Star 2
            </ion-button>
        </ion-buttons>
        <ion-title text-center>{{ name }}</ion-title>
        <ion-buttons slot="end">
            <ion-button color="light">
                <ion-icon name="star"></ion-icon>
                Star 2
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

如果你想要一个自定义图标，你可以看到这个link。

Answer 2

像这样将它用于您的工具栏

 <ion-header>
      <ion-toolbar>
          <ion-text>
          <img src="/assets/star.svg" class="rep-icon" />
          <div class="rep">%rep%</div>
        </ion-text>
        <ion-title>
          %name%
        </ion-title>
          <ion-text>
          <img src="/assets/star.svg" class="rep-icon" />
          <div class="rep">%rep%</div>
        </ion-text>
      </ion-toolbar>
    </ion-header>