CSS导航菜单中logo图片溢出li容器无法垂直居中问题

问题原因 #

Logo溢出<li>容器、无法垂直居中是两个规则冲突导致的：

• 所有导航项<li>被固定为52px高度，但未对logo图片做尺寸约束，图片默认按原生分辨率渲染，直接撑破父容器边界
• 普通文本导航项靠line-height: 52px实现垂直居中，但logo所在列表项未做内容对齐适配，图片作为inline元素默认按基线对齐，出现位置偏移

修复步骤 #

不需要修改HTML结构，仅调整对应CSS规则即可：

1. 给logo专属的<li>设置flex布局，实现内部内容垂直居中
2. 约束logo图片的高度，保留宽度自适应避免图片变形，同时将图片设为block元素消除inline元素默认的底部留白
3. 删除原CSS里无效的vertical-align: middle属性

完整修复后的CSS对应片段：

.ElementsMenu > li{ /* 原有通用导航项规则保留 */
    display: block;
    height: 52px;
    line-height: 52px;
    list-style:none;
    border: 1px solid rgb(0, 0, 0);  
}

/* 新增logo项专属布局规则 */
.ElementsMenu > li.logo {
    display: flex;
    align-items: center;
}

/* 修改原有logo图片规则 */
.logo > img{
    height: 40px; /* 比导航栏总高度小12px，上下各留6px边距更美观 */
    width: auto;
    display: block;
    border: 1px solid rgb(172, 178, 15);
}

修改后logo会完全约束在所属<li>容器内，和其余导航文本项保持垂直居中对齐，匹配预期设计效果。

参考素材 #

• Logo素材：
• 错误效果截图：
• 预期效果参考：
• 在线调试地址：JSFiddle调试链接

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