Html 图标未在圆形标记内垂直居中显示

我试图创建一个带有标签的圆圈，并在圆圈内放置图标。但是这个图标有点下降。

试试这个CSS：

*{
框大小：边框框；
}
身体{
背景：黑色；
}
a{
显示：flex；/*新添加*/
对齐项目：居中；/*新添加*/
边框：1px实心#fff；
光标：指针；
边界半径：50%；
右边距：1rem；
宽度：44px；
高度：44px；
文本对齐：居中；
过渡：均为0.2s；
}
我{
颜色：白色；
}
a我{
页边距：0自动；/*新添加*/
}

页面标题

将这些样式添加到图标中

display: inline-block;
padding: 0px 15px; /* changed style */
border: 1px solid #fff;
cursor: pointer;
border-radius: 50%;
margin-right: 1rem;
width: 44px;
height: 44px;
text-align: center;
transition: all 0.2s;
line-height: 44px; /* added style */

---

图标的位置是由a元素的填充和默认行高度决定的。您可以尝试删除填充，并将线条高度设置为元素高度

您还可以使用CSS flex将图标居中

*{
框大小：边框框；
}
身体{
背景：黑色；
}
#没有填充物{
框大小：边框框；
显示：内联块；
填充：0；
线高：44px；
边框：1px实心#fff；
光标：指针；
边界半径：50%；
右边距：1rem；
宽度：44px；
高度：44px；
文本对齐：居中；
过渡：均为0.2s；
}
#弯曲{
显示：内联flex；
边框：1px实心#fff；
光标：指针；
边界半径：50%；
右边距：1rem；
宽度：44px；
高度：44px；
对齐项目：居中；
证明内容：中心；
过渡：均为0.2s；
}
我{
颜色：白色；
}

页面标题

您可以通过使用线条高度来执行以下操作：

a {
   display: inline-block;
  border: 1px solid #fff;
  cursor: pointer;
  border-radius: 50%;
    width: 44px;
  height: 44px;
  line-height: 44px;
  align-items: center;
  text-align: center;
  justify-content: center;
  transition: all 0.2s;
} 

---

我认为，flexbox是最简单的解决方案，只需在“a”标签上添加以下行：

显示：flex；
证明内容：中心；
对齐项目：居中我给你做了一个片段。请把它改成你想要的样子——你错过了颜色：白色；它与flex一起工作，难道我们不能通过传递与高度和宽度相同的线高度来完成吗？哦，因为我明确地给出了高度和宽度，不需要提供填充。它通过移除填充并将线高度设置为与高度相同来工作。flex也可以实现同样的效果。