如何调整CSS减小链接高度并始终保持文本高度居中对齐？

• 你给li设置了display: inline，行内元素不支持自定义高度属性，当前所有li的高度完全由内部a标签的上下padding撑开，修改li的height不会生效
• main-menu__user-menu的边框是加在li元素上的，你调整li高度时内部a标签的位置不会同步变化，自然无法实现文本垂直居中

推荐使用flex布局改造，无需修改HTML结构，后续调整高度时文本会自动保持垂直居中，修改后的SCSS代码如下：

.main-menu {
    border-bottom: 1px solid #000000;
    min-height: 50px; // 整个菜单的全局高度可在这里统一控制
    display: flex;
    align-items: center;

    & > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        gap: 0.2rem; // 所有菜单项的间距统一控制，可根据需求调整

        & > li {
            display: flex;
            align-items: center; // 内部文本自动垂直居中
            border: 1px solid #FF0000;

            & > a {
                display: block;
                padding: 0 1.6rem; // 移除上下padding，靠flex实现垂直居中
                color: #000000;
                text-decoration: none;

                &:hover {
                    color: #808080;
                }
            }
        }
    }

    &__app-menu {
        // 移除原有float:left属性
        &:first-of-type {
            margin-right: auto; // 第一个左侧菜单自动占满右侧剩余空间，实现左右菜单分离
        }
    }

    &__user-menu {
        // 移除原有float:right属性
        border: 1px solid #000000;
        border-radius: 1.5rem;
        height: 36px; // 需要调整按钮高度直接改这里即可，文本会自动保持居中
    }
}

如果你不想改动现有浮动布局，也可以用行高匹配的方式快速修复：

1. 把li的display属性改为inline-block，让height属性生效
2. 给a标签设置line-height等于你想要的li高度，同时把a标签的上下padding改为0

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