Html 如何将两个几乎相同的图标正确居中放置到<；按钮>；？

我正在尝试创建带有两个图标的切换按钮：图标麦克风和图标麦克风关闭。不幸的是，单击按钮时，图标麦克风关闭图标相对于图标麦克风向左移动一点

例如：

HTML:

JavaScript:

$(function() {
    $("#btn1").click(changeIcon);
}

function changeIcon() {
    $(this).children().toggleClass("icon-microphone icon-microphone-off");
}

我找到了一个解决方法（我不太喜欢）：只需为图标麦克风添加1px左边距图标：

.margin-1px-fix{margin left:1px；}

---

是否有更好的方法将两个图标对齐到中心？

将图标的大小更改为奇数。它是1px，因为您试图居中的对象可能不是偶数像素宽

.btn {
    width: 49px;
    min-height: 49px;
    border-radius: 50%;
    background: #854eb3;
    text-align: center;
    line-height: 49px;
    font-size: 30px;
    color: white;
}

---

考虑到你的答案，我会把线的高度设为49px，假设其他一些图标可能会稍微不同一个像素+这可能是安全的。我编辑了上面的代码片段以反映这一点。

$(function() {
    $("#btn1").click(changeIcon);
}

function changeIcon() {
    $(this).children().toggleClass("icon-microphone icon-microphone-off");
}

.btn {
    width: 49px;
    min-height: 49px;
    border-radius: 50%;
    background: #854eb3;
    text-align: center;
    line-height: 49px;
    font-size: 30px;
    color: white;
}