Ionic - 当 ion-icon 较大时，ion-item 文本不垂直居中

Question

我有一个带有图标后跟文本的离子项目列表。当图标尺寸变小时，如下图所示，文本似乎垂直对齐到 ion-item 的中心。但是当图标变大时，对齐有点偏离。

这就是我添加的所有内容：

 <ion-item>
  <ion-icon class="icon ion-ios-clock-outline"></ion-icon>
  Recent
</ion-item>

和CSS：

 .icon {
 font-size: 35px;
 color: #ffC977;
}

我怎样才能解决这个问题。我尝试使用 vertical-align ， align-item 和 align-self 。他们都没有工作。

原文由 user3607282 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个。在文本中添加 <span> 元素， vertical-align 仅适用于并排内联的元素：

CSS

 .icon {
 display: inline-block;
 font-size: 35px;
 color: #ffC977;
 vertical-align: middle;
}

.text{
  display: inline-block;
  vertical-align: middle;
}

HTML

 <ion-item>
  <ion-icon class="icon ion-ios-clock-outline"></ion-icon>
  <span class="text">Recent</span>
</ion-item>

原文由 Luís P. A. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<span style="font-size: 18px;vertical-align: middle !important;">
    <ion-icon name="location" class="location-icon"></ion-icon>
  </span>
  <span style="height:80px !important;">
    <b style="font-size: 18px;vertical-align: middle !important;">Port Louis, MU</b>
  </span>

原文由 Megha Shetty 发布，翻译遵循 CC BY-SA 4.0 许可协议