求助：Ionicons与文本垂直居中对齐及ion-col布局异常修复

• 无法让ion-col内的Ionicons图标与文本垂直居中对齐
• 第一个ion-col单元格的对齐存在问题

提供的代码：

<ion-row>
    <ion-col size="3">
        23C
    </ion-col>
    <ion-col size="3">Text
        <ion-icon name="arrow-up-outline" size="small"
            [ngStyle]="{'transform': 'rotate(180deg)'}">
        </ion-icon>
    </ion-col>
    <ion-col size="3">Text
        <ion-icon name="arrow-up-outline" size="small"
            [ngStyle]="{'transform': 'rotate(45deg)'}">
        </ion-icon>
    </ion-col>
</ion-row>

布局效果：

修复第一个ion-col的对齐 #

Ionic提供了内置对齐类，直接给ion-col添加即可：

• 实现水平+垂直居中：添加class="ion-align-items-center ion-text-center"
• 仅需水平居中：添加class="ion-text-center"

修改后的第一个单元格代码：

<ion-col size="3" class="ion-align-items-center ion-text-center">
    23C
</ion-col>

图标与文本垂直居中对齐 #

以下两种方法均可快速实现：

方法1：使用Ionic内置类 #

将文本和图标包裹在同一个行内容器中，添加ion-align-items-center和ion-inline类，确保元素垂直居中且同行显示：

<ion-col size="3">
    <span class="ion-align-items-center ion-inline">
        Text
        <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(180deg)'}"></ion-icon>
    </span>
</ion-col>

方法2：自定义CSS #

给图标添加自定义类，通过CSS的vertical-align属性控制对齐：

1. 给ion-icon添加类名：

<ion-icon class="icon-middle" name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(180deg)'}"></ion-icon>

2. 在组件CSS文件中添加样式：

.icon-middle {
    vertical-align: middle;
    margin-left: 4px; /* 可选：调整图标与文本的间距 */
}

完整示例代码 #

<ion-row>
    <ion-col size="3" class="ion-align-items-center ion-text-center">
        23C
    </ion-col>
    <ion-col size="3">
        <span class="ion-align-items-center ion-inline">
            Text
            <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(180deg)'}"></ion-icon>
        </span>
    </ion-col>
    <ion-col size="3">
        <span class="ion-align-items-center ion-inline">
            Text
            <ion-icon name="arrow-up-outline" size="small" [ngStyle]="{'transform': 'rotate(45deg)'}"></ion-icon>
        </span>
    </ion-col>
</ion-row>

内容的提问来源于stack exchange，提问作者El Dude