css - ionic - 当 ionic 图标较大时， ionic 元素文本不垂直居中

Question

我有一个 ion-items 列表，其中有一个图标，后跟文本。当图标尺寸较小时，如下图所示，文本似乎垂直对齐到 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。它们都不起作用。

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>