图标与文本未居中：注销图标与Logout文本对齐问题求助

核心原因 #

图片属于行内替换元素，默认和文本的基线对齐，这就是视觉上图标偏高的原因——单纯加margin没法从根本上解决对齐问题，得调整元素的对齐方式。

可行解决方法 #

方法1：使用vertical-align快速对齐

给图标设置vertical-align: middle，让它和文本的中线对齐：

#logout-icon {
    width: 20px;
    vertical-align: middle;
}

方法2：Flex布局（推荐，适配性更强）

给父容器.dropdown-content开启Flex布局，通过align-items: center让所有子元素垂直居中，还能顺便控制图标和文本的间距：

.dropdown-content {
    position: absolute;
    width: 120px;
    padding: 14px;
    background-color: yellow;
    display: flex;
    align-items: center;
    gap: 8px; /* 可选：设置图标和文本的间距 */
}

#logout-icon {
    width: 20px;
}

方法3：通过line-height对齐

如果文本的行高和图标高度匹配，可以给父容器和图标设置相同的line-height来对齐：

.dropdown-content {
    position: absolute;
    width: 120px;
    padding: 14px;
    background-color: yellow;
    line-height: 20px; /* 和图标宽度一致 */
}

#logout-icon {
    width: 20px;
    line-height: 20px;
}

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