如何在跨度内将带有文本的图标居中？ [复制]答案

【问题标题】：How do I center an icon with a text within a span? [duplicate]如何在跨度内将带有文本的图标居中？ [复制]
【发布时间】：2020-08-21 19:34:10
【问题描述】：

我在 span 元素中有一个相邻的图标和文本。我尝试在图标和/或文本上使用填充和边距。填充适用于整行，而不仅仅是图标本身，大约 1rem 太高了。

[编辑] 我希望看到垂直居中：

相反，图标有点太高了。

 <span><mat-icon>arrow_left_alt</mat-icon>Drag workflow </span>

【问题讨论】：

【解决方案1】：

给图标一个相对位置并稍微向下移动：

<span><mat-icon style="position:relative; top:3px;">arrow_left_alt</mat-icon>Drag workflow </span>

您必须调整3px 的值，它越高，图标移动的越远。

其他答案可能会为您提供正确居中对象的方法，但实际中心可能与视觉中心不同。我会使用这种方法，只需通过眼睛进行调整即可获得最佳效果。

【讨论】：

【解决方案2】：

为您的跨度添加一个类

.btn_container {
   display: flex;
   flex-direction: row;
   justify-content: center;
}

【讨论】：