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属性就够了,一般情况都是略高于文字,所以给顶部设置相对高度,就可以了
在这里插入图片描述


版权声明:本文为weixin_45717984原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。