【问题标题】: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”

【问题讨论】:

  • 这是什么字体大小? &lt;input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites"&gt;&lt;i class="far fa-heart my-auto"&gt;&lt;/i&gt;的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;
    }
    

    【讨论】:

      猜你喜欢
      • 2023-03-04
      • 1970-01-01
      • 2017-01-01
      • 2013-09-13
      • 1970-01-01
      • 2016-10-08
      • 1970-01-01
      • 2015-05-04
      • 2018-11-25
      相关资源
      最近更新 更多