垂直对齐

本教程是 Iconify for Vue 教程 的一部分。

当图标在文本中渲染时，默认情况下它会像其他图像一样与基线对齐。

表情符号和图标字体的渲染位置会略低于基线，就像普通文本一样。

如果要在文本中渲染图标，你可能希望为每个图标添加 vertical-align，使其渲染位置略低于基线，从而更好地融入文本，效果类似于表情符号和图标字体：

SVG in text:

SVG in text with vertical-align: -0.125em:

内联属性

无需为每个图标添加 vertical-align，图标组件提供了 inline 属性。为图标组件添加 inline 属性等同于设置 style="vertical-align: -0.125em"：

Inline attribute demo:

vue<template>
   <div>
       <p>
           Inline attribute demo:
           <Icon icon="line-md:image-twotone" :inline="true" />
           <Icon icon="mdi:account-box-outline" :inline="true" />
       </p>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


重要提示：此属性不会更改图标的 display 模式。它仅添加 vertical-align 样式。