css - 在 Ionic 3 中将图标与文本垂直对齐

Question

我正在尝试将 Ionic 图标放在文本右侧并使它们垂直居中，但我无法做到这一点。我正在尝试avg-rating使用这样的 flex 布局来对齐内部的内容：

<ion-content padding>
  <ion-card>
    <img src="assets/imgs/restaurant.jpeg" />
    <ion-card-content>
      <div class="title">
        <ion-card-title>
          Title
        </ion-card-title>
        <div class="avg-rating">
          <h2>4,5/10</h2>
          <ion-icon name="star"></ion-icon>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

这是我的 SASS：

.avg-rating {
  display: flex;
  align-items: center;
  h2 {
    margin-bottom: 0;
  }
}

正如您在此处看到的，这些项目没有对齐。我习惯于使用 CSS 和 Web 应用程序，这总是有效的，但在这里似乎并没有像我预期的那样工作。知道我在做什么错吗？谢谢。

Answer 1

你试过vertical-align吗ion-icon？

就像是：

.avg-rating ion-icon {
   vertical-align: middle;
}

Answer 2

我有一个类似的问题。尝试将元素放入 an 而不是这样：

<ion-item> <h2>4,5/10</h2> <ion-icon name="star"></ion-icon> </ion-item>