带Emoji的按钮与文本按钮错位，如何实现垂直对齐？

我有两个按钮。

HTML代码：

<div style="position: fixed; right: 0; top: 0">
    <button class="top-button">
        🌎
    </button>
    <button class="top-button">
        Text
    </button> 
</div>

CSS代码：

.top-button {
    display: inline-block;
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: rgba(180, 180, 180, 50%);
    border: none;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 5px;
    margin: 0.1rem;
}

可以看到，带有Emoji的按钮位置略高于文本按钮，我希望让两个按钮对齐，请问该如何实现？

方法1：用Flex布局统一按钮内部对齐 #

将按钮的display属性从inline-block改为inline-flex，同时添加垂直和水平居中属性，让Emoji和文本都在按钮内居中，按钮的整体视觉高度也会保持一致：

.top-button {
    display: inline-flex; /* 替换原inline-block */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: rgba(180, 180, 180, 50%);
    border: none;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 5px;
    margin: 0.1rem;
}

方法2：调整按钮的垂直对齐基准 #

如果不想修改布局模式，直接给按钮添加vertical-align: middle，让两个按钮基于中线对齐，抵消Emoji和文本基线差异带来的偏移：

.top-button {
    display: inline-block;
    vertical-align: middle; /* 添加这一行 */
    cursor: pointer;
    padding: 0.25rem;
    min-width: 2rem;
    min-height: 2rem;
    background-color: rgba(180, 180, 180, 50%);
    border: none;
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 5px;
    margin: 0.1rem;
}

问题原因 #

Emoji字符的基线位置和普通文本的基线位置存在差异，而inline-block元素默认是基于基线对齐的，这就导致两个按钮的视觉位置出现了偏移。上面两种方法要么统一内部内容的对齐逻辑，要么调整按钮整体的对齐基准，都能解决这个问题。

内容的提问来源于stack exchange，提问作者kiv_apple