垂直对齐

本教程是 Iconify Icon Web 组件教程 的一部分。

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

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

如果要在文本中渲染图标，你可能希望为每个图标添加 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:

html<p>
   Inline attribute demo:
   <iconify-icon inline icon="line-md:image-twotone"></iconify-icon>
   <iconify-icon inline icon="mdi:account-box-outline"></iconify-icon>
</p>

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