当离子图标较大时，离子 - 离子项文本不垂直居中 [英] Ionic - ion-item text is not vertically centered when ion-icon is bigger

问题描述

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

I have a list of ion-items with an icon followed by text. When the icon size is smaller as seen on the image below, the text seems to vertically align itself to the center of the ion-item. But when the icon is bigger, the alignment is a bit off.

这是我添加的所有内容：

This is all I've added:

<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 。他们都没有工作。

How can I fix this. I tried using vertical-align, align-item and align-self. None of them worked.

推荐答案

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

Try this. Add a <span> element to the text, vertical-align only works with elements inline side by side :

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>

这篇关于当离子图标较大时，离子 - 离子项文本不垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！