将垂直字体真棒图标与跨度标签内的输入提交对齐[重复]答案

【问题标题】：Align vertically font awesome icon with input submit inside a span tag [duplicate]将垂直字体真棒图标与跨度标签内的输入提交对齐[重复]
【发布时间】：2020-04-06 11:54:15
【问题描述】：

我的图标不在输入按钮的中心，如何让它们对齐？

<span>
<i class="far fa-heart my-auto"></i>
<input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites">
</span>

图标没有边距或填充，所以我不能简单地做一个引导程序“my-auto”

【问题讨论】：

这是什么字体大小？ <input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites">把<i class="far fa-heart my-auto"></i>的font-size设置成一样？
您的示例中的 desired 对齐方式是什么？图像中的对齐显示为基线，尽管看起来font-size 似乎略微主要用于图像？只需将它们设置为相同即可。
尝试匹配字体大小和行高
line-height 调整两者，它只是移动整个 span 标签，图标仍然不居中

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

您可以使用 bootstrap 4.0 flex 类在中心对齐项目

i {
  font-size: 20px;
  margin-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />




<span class="d-flex align-items-center mt-2 ml-2">
                <i class="far fa-heart my-auto"></i>
                <input type="submit" class="btn favorite-button font-weight-bold py-0 px-1" name="favorite" value="Add to Favorites">
              </div>

【讨论】：

感谢这个修复，没有意识到我只需要 d-flex

【解决方案2】：

从标题我猜你应该尝试将显示更改为 flex 列并对齐内容

<span class="d-flex flex-column justify-content-center align-items-center" style="width: 150px;">
        <i class="far fa-heart my-auto"></i>
        <input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites">
</span>

【讨论】：

【解决方案3】：

只需将您的“far”类更改如下；

.far {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    padding: 5px;
    font-size: 1rem;
}

【讨论】：