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

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>

Answer 3

使用 padding-vertical css实用程序可以带来相同的结果。 可以在此处看到Ionic的css实用程序列表：https://ionicframework.com/docs/theming/css-utilities/

<ion-item>
        <ion-row>
            <ion-col width-25>
                <ion-icon class="icon ion-ios-clock-outline"></ion-icon> 
            </ion-col>
            <ion-col width-75 padding-vertical>
                Recent
            </ion-col>              
        </ion-row>
    </ion-item>

Answer 4

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

Answer 5

请更新以下CSS类。您也可以将文本移动到标签标签，并为标签标签提供垂直对齐中间。

<强> CSS

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

    label{ 
      vertical-align: middle;
    }

<强> HTML

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