垂直对齐

本教程是 Iconify SVG 框架教程 的一部分。

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

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

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

SVG in text:

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

内联属性

要为图标添加 vertical-align，有以下几种选项：

• 将 "iconify-inline" 添加到类列表中（或将 "iconify" 替换为 "iconify-inline"）。
• 添加 data-inline 属性。
• 添加值为 -0.125em 的 vertical-align 样式。

Inline attribute demo:

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

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