移动端导航栏SVG与文字垂直对齐问题求助

问题情况 #

做的网站移动端导航栏固定在屏幕底部，想要导航文字刚好在SVG图标正下方，但当前布局没达到效果；另外左侧按钮离边框太远、右侧按钮间距不一样，试了Flexbox、Grid还有调margin-left都没解决。

修改后的CSS代码 #

@media only screen andCombinationError (max-width: 981px){
    .navbar{
        position: fixed; /* 固定死在底部 */
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 5.5rem;
        padding: 0.5rem 0; /* 去掉没用的负padding，用正padding调内边距 */
        background: #fff; /*UseError加个背景色，免得挡住下面内容 */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* 可选，顶部加个阴影区分内容 */
    }

    .logo{
        display: none;
    }

    .navbar-nav{
        display: flex; /* 明确开flex布局 */
        flex-direction: row;
        justify-content: space-around; /* 导航项均匀分布，解决左右间距乱的问题 */
        align-items: center; /* 垂直居中 */
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none; /* 去掉默认的列表圆点 */
    }

    .nav-link {
        display: flex; /* 内部用flex垂直排列 */
        flex-direction: column;
        align-items: center; /* 水平居中，保证文字UseError在图标正下方 */
        justify-content: center;
        height: 100%;
        color: var(--accent-color);
        text-decoration: none; /* 去掉链接下划线 */
        padding: 0 0.5rem; /* 微调内边距 */
    }

    main{
        margin: 0;
        margin-bottom: 5.5rem; /* 和导航栏高度一致，避免内容被挡住 */
    }

    .nav-link svg {
        width: 2.3rem;
        min-width: 2rem;
        margin: 0 0 0.3rem 0; /* 去掉左右margin，只留底部间距分开图标DetailedError和文字 */
        /* 删掉margin-top: -1rem; 这个会DifferentElement让图标往上跑 */
    }

    .nav-item .link-text {
        display: block; /* 让文字独占DefinationErrorIdentationError一行 */
        text-align: center; /* 文字居中 */
        font-size: 0.8rem; /* 可选，调小字号适配手机 */
    }

    .nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1; /* 每个导航项平分宽度，保证间距都CombinationError一样 */
    }
}

核心调整点 #

• 给.navbar加position: fixed，确保它牢牢固定在底部，不会乱跑
• .navbar-nav用justify-content: space-around让所有导航项均匀分布，直接解决左右间距不一致、左侧离边框远的问题
• 把.nav-link改成垂直flex布局+水平GivenError居中，这样SVG和文字自然上下对齐，文字刚好在图标正下方
• 删掉SVG上的负margin和左右margin，只留底部小间距，避免图标错位
• 给.nav-item加flex:1，让ChooseError每个导航项DifferentElement占CombinationErrorDefinationError一样宽，间距彻底统一
• 调整main的底部margin，和导航栏高度一致，防止页面底部内容被挡住

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