Javascript 元素无法在<；中垂直对齐的原因；部门>/&书信电报；a>/&书信电报；我>；？

我试图在页面的右下角创建一个固定位置的垂直工具栏。正在使用的图标字体（带有class=“fa”的i标记）与父元素（a标记）没有垂直居中对齐。我试图解决这个问题已经有一段时间了，但没有任何效果

输出如下，图标始终位于父元素的顶部。

.navbar默认值{
背景#0099cc；
边框底部：1px实心#CCCC；
}
.侧工具{
位置：固定；
右：1%；
底部：5%；
宽度：40px；
边框：1px实心#eee；
背景色：白色；
文本对齐：居中；
字体大小：24px；
z指数：1040；
}
.侧工具a{
文本对齐：居中；
宽度：40px；
高度：40px；
显示：内联块；
}
.侧工具a i{
垂直对齐：中间对齐；
}

---

在其

A

容器中设置两个不同的图标居中选项。实际上，我并不介意这里的绝对居中技巧：

添加到

。侧工具a

：

position: relative;

将针对图标的CSS替换为：

.side-tool a i {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

---

图标应该绝对位于40x40

a

标记的中心。

除了在

元素中添加

垂直对齐：中间

之外，还需要添加一个

线高度

等于父元素的

高度（
40px
）：

.side-tool a i {
  vertical-align: middle;
  line-height: 40px;
}


.navbar默认值{
背景#0099cc；
边框底部：1px实心#CCCC；
}
.侧工具{
位置：固定；
右：1%；
底部：5%；
宽度：40px；
边框：1px实心#eee；
背景色：白色；
文本对齐：居中；
字体大小：24px；
z指数：1040；
}
.侧工具a{
文本对齐：居中；
宽度：40px；
高度：40px；
线高：40px；/*已添加*/
显示：内联块；
}
.侧工具a i{
垂直对齐：中间对齐；
}
将锚定标签制作成弹性盒

.side-tool a {
  display: flex;
  justify-content: center;
  align-items: center;
}

将此添加到CSS中应该会得到所需的结果


.navbar默认值{
背景#0099cc；
边框底部：1px实心#CCCC；
}
.侧工具{
位置：固定；
右：1%；
底部：5%；
宽度：40px；
边框：1px实心#eee；
背景色：白色；
文本对齐：居中；
字体大小：24px；
z指数：1040；
}
.侧工具a{
宽度：40px；
高度：40px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

预期输出是什么？它位于右下角。无法看到问题。预期的输出是，图标字体应保持在每个块的右中间，我的意思是，垂直和水平。但我的代码效果是每个图标字体都停留在块的顶部这应该是正确的答案，的行高度应设置为与其父级的高度相同（）在works上设置的行高度，但不在中生效。所以线条高度和垂直对齐应该在同一个元素中，对吗？我试过了，所有的图标字体在最右下角互相重叠，我有一个打字错误。确保您有
位置：相对在
侧工具a上
。