首页 文章

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

提问于
浏览 次
14

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

enter image description here

这是我添加的全部内容：

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

css ionic-framework

4 回答

  • 24

    试试这个 . 在文本中添加 <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

    其实Ionic就是这么做的 . 但是你需要通过 item-start ， item-end 等来告知元素的位置......

    只需设置您的代码：

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

    回复于
  • -2

    使用 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>
    回复于
  • 1

    请更新以下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>
    回复于

相关问题