当离子图标较大时,离子 - 离子项文本不会垂直居中

Question

我有一个带有图标后跟文字的离子项列表.当图标尺寸较小时,如下图所示,文本似乎垂直对齐离子项的中心.但是当图标更大时,对齐有点偏差.

这是我添加的全部内容:

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

Answer 2

实际上 Ionic 对你这样做了。但是，你需要告知其中的元素将与item-start，item-end等

只需像这样设置您的代码：

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