如何垂直对齐图标字体答案

【问题标题】：How to vertically align icon font如何垂直对齐图标字体
【发布时间】：2015-02-25 09:53:36
【问题描述】：

我正在尝试垂直对齐字体图标。我试过vertical-align: middle，但我总是有点对齐差异。下面的示例有 2 种不同的方式来使用图标，并且它们没有正确对齐。

div {
  font-size: 50px;
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  background: yellow;
}

.cart {
  margin-top: 20px;
}

.cart:before {
  font-family: "fanatic-icons" !important;
  font-weight: normal;
  content: "b";
  margin-right: 5px;
  vertical-align: middle;
  text-transform: none;
}

<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">

<div>
  <span class="icon icon-shopping-cart"></span> Shopping Cart
</div>

<div class="cart">
  Shopping Cart
</div>

【问题讨论】：

你能提供一个 JSFiddle 吗？
vertical-align: middle; display: inline-block?
你使用什么样的标志性字体？请分享链接
jsfiddle.net/crphowLg/7

标签： html css vertical-alignment icon-fonts

【解决方案1】：

你可以试试vertical-align: text-bottom或vertical-align: text-top，看你觉得哪个更垂直居中。

对于您的购物车图标，text-top 似乎是最垂直居中的。

例如：https://jsfiddle.net/p3g189bg/

【讨论】：

我尝试使用底部而不是文本底部。非常感谢。

【解决方案2】：

尝试使用line-height 属性

您可以将其设置为0.5,1,1.5 等

【讨论】：

【解决方案3】：

你可以试试vertical-align:middle;

或line-height:1;

或者使用padding属性可以设置图标位置

使用vertical:middle; 属性js 小提琴的示例：http://jsfiddle.net/vrcarwrj/

【讨论】：

【解决方案4】：

除了上述之外，使用您描述的 span 元素方法，您可以相对于其父 div 元素相对定位 span 标签。

喜欢：

div{
 position: relative;
}    
span.icon-shopping-cart{
 position: relative;
 top: 5px;
}

【讨论】：

【解决方案5】：

你可以试试valign: middle

和/或然后将line-height 设置为 1px、1.5px 等。

【讨论】：

【解决方案6】：

现在通过 Flexbox 的另一个例子。

span {
  font-family: helvetica, arial, sans-serif;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 3rem;
  line-height: 4rem;
  border: 1px solid #ffb0d1;
}

/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
  padding-right: 1.5rem;
}

<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
   <i class="fas fa-shopping-cart"></i>
   Shopping Cart
</span>

【讨论】：