span标签内使用icon图标,icon和文字位置水平对齐

使用背景:

span标签里面嵌套icon图标,图标位置和文字位置水平无法对齐
在这里插入图片描述

解决方法:

<span>转移方式
   <y-tooltip class="item" effect="dark" content="固定资产、研发领料将忽略此设置,统一采用复制" placement="top">
   // icon的style中postion和top是重点
    <y-icon
      style="position:relative;top:7px;margin-right:10px"
      class="icon-class"
      name="common_catalogue_m@yabby"
    ></y-icon>
  </y-tooltip>
</span>

1.在icon中设置样式,这里我用的是行内样式
2.首先设置postion为相对定位,relative
3.然后再根据icon相对于文字的位置,用top属性就够了,一般情况都是略高于文字,所以给顶部设置相对高度,就可以了
在这里插入图片描述

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值