Css 将Ionic 3中的图标与文本垂直对齐

我试图把一个爱奥尼亚图标放在文本的右边，并保持它们垂直居中，但我不能做到这一点。我正在尝试使用flex布局将avg评级中的内容对齐，如下所示：

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

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

你试过在离子图标上垂直对齐吗

比如：

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

你试过在离子图标上垂直对齐吗

比如：

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

---

我也有类似的问题。尝试将元素放在内部，而不是像这样：

4,5/10

---

我也有类似的问题。尝试将元素放在内部，而不是像这样：

4,5/10

---

它什么都干不了