Html 如何调整字体图标的垂直位置？

我有一个很棒的字体图标，如下所示：

<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

.cat-color {
  line-height: 9px;
  vertical-align: top;
}

全部的
11

这是一个jsfiddle 基本上，我想有向上或向下移动图标的选项。我试着添加了填充和边距，但什么都没有

如何更改图标的垂直位置

div {
  display: inline-flex;
  align-items: center;
}

div{
显示：内联flex；
对齐项目：居中；
}
我{
边缘底部：20px；
转换：.2s
}
div:hover>i{
边缘底部：-20px；
}

悬停
我

div{
显示：内联flex；
对齐项目：居中；
}
我{
边缘底部：20px；
转换：.2s
}
div:hover>i{
边缘底部：-20px；
}

悬停
我

1.使用

显示：带
垂直对齐的内联块

请参阅此处的更多信息：


.fa{
显示：内联块；
垂直对齐：底部对齐；
}
跨度{
显示：内联块；
高度：150像素；
}
div{
背景：红色；
}

全部的
11
1.使用
显示：带
垂直对齐的内联块

请参阅此处的更多信息：


.fa{
显示：内联块；
垂直对齐：底部对齐；
}
跨度{
显示：内联块；
高度：150像素；
}
div{
背景：红色；
}

全部的
11
相对定位：


ul{
左侧填充：20px；
列表样式：无；
}
李{
边缘底部：10px；
}
.cat color.fa：：之前{
位置：相对位置；
顶部：20px；
}

全部的
11相对定位：


ul{
左侧填充：20px；
列表样式：无；
}
李{
边缘底部：10px；
}
.cat color.fa：：之前{
位置：相对位置；
顶部：20px；
}

全部的
11
您也可以使用线条高度和垂直对齐，如下所示：

<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

.cat-color {
  line-height: 9px;
  vertical-align: top;
}

并将线条高度更改为更高或更低的值，以向上或向下移动图标

我已经把它调高了

您也可以使用线高度和垂直对齐，如下所示：

<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

.cat-color {
  line-height: 9px;
  vertical-align: top;
}

并将线条高度更改为更高或更低的值，以向上或向下移动图标

我已经把它调高了

你试过什么？你能发布你的CSS吗？通常，字体设置会将“i”元素显示为内联。我通常将其设置为内联块或块，这取决于我试图定位的位置。您尝试了什么？你能发布你的CSS吗？通常，字体设置会将“i”元素显示为内联。我通常将其设置为内联块或块，具体取决于我试图定位的内容。Kode_12是否使用flex？Kode_12是否使用flex？请检查它是否可以跨浏览器工作，因为您关心的浏览器。我只在chrome和IE Edge中检查了这一点。请检查它是否可以跨浏览器工作，因为您关心的浏览器。我只在chrome和IE Edge中检查了这一点。我得到的图标远低于演示中的文本，这就是为什么我说它应该在那里…垂直位置已根据OP的要求进行了调整。只需更改顶部值进行调整。我得到的图标远低于演示中的文本，这就是为什么我说这就是它应该在的地方…垂直位置已经按照OP的要求进行了调整。只需更改顶部值进行调整。尝试给外部div设置一个高度，我想两个演示都不起作用了。。你能检查一下吗？我的两个答案都改成了
高度：150px
。对于第一个示例，您需要设置
span
元素和
display:inline块的高度。在第二个例子中，它与
top
和
height:150px
在
div
上一起工作，但是，特别是在第二个解决方案中，您可以将
top:80%
更改为您想要的任何值，它就像一个符咒一样工作。不确定你为什么说它不工作，而我的观点是，需要通过调整一个特定的属性来调整演示，使其居中。好吧，我同意你的看法：）试着给外层的div加一个高度，我想你的两个演示都不起作用。。你能检查一下吗？我的两个答案都改成了
高度：150px
。对于第一个示例，您需要设置
span
元素和
display:inline块的高度。在第二个例子中，它与
top
和
height:150px
在
div
上一起工作，但是，特别是在第二个解决方案中，您可以将
top:80%
更改为您想要的任何值，它就像一个符咒一样工作。不确定你为什么说它不工作，而我的观点是，需要通过调整一个特定的属性来调整演示，使其居中。嗯，我同意你的看法：）