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

vcirk6k6 于 2022-12-08 发布在 Ionic

关注(0)|答案(5)|浏览(160)

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>

And the CSS:

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

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

ionic-framework

来源：https://stackoverflow.com/questions/35623280/ionic-ion-item-text-is-not-vertically-centered-when-ion-icon-is-bigger

5条答案

按热度按时间

wswtfjt71#

试试看，在文本中添加一个<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>

赞(0）回复(0）举报 2022-12-08

6g8kf2rb2#

实际上，Ionic就是这样做的，但是你需要用item-start，item-end等来告知元素的位置。
只需如下设置代码：

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

赞(0）回复(0）举报 2022-12-08

ehxuflar3#

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

赞(0）回复(0）举报 2022-12-08

tyu7yeag4#

使用padding-verticalcss工具可以得到同样的结果。这里可以看到一个用于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>

赞(0）回复(0）举报 2022-12-08

wnavrhmk5#

Please update your following CSS Class. Also you can move your text to a label tag and give the vertical-align middle for the label tag as well.

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>

赞(0）回复(0）举报 2022-12-08

我来回答

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

5条答案

相关问题

热门标签

最新问答