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

猜你喜欢

转载自blog.csdn.net/weixin_45717984/article/details/124794087
今日推荐