水平排列的ul内如何实现父元素与子元素的垂直对齐

你当前代码无法实现图标与文字垂直对齐，核心问题是承载文字和图标的a标签未设置统一的垂直对齐规则，同时使用了不存在的float: center属性导致布局上下文异常。以下是可直接生效的修复方案：

修复步骤 #

1. 替换导航链接的布局规则，使用Flex布局实现内部元素垂直对齐
   修改CSS中.navbar ul li .leftNav的样式：

.navbar ul li .leftNav {
    display: inline-flex;
    align-items: center;
    float: left;
    gap: 6px; /* 可自定义文字与图标之间的间距 */
}

2. 修正无效的float: center属性，调整中部标题对齐
   修改.navbar ul li .middleNav的样式：

.navbar ul li .middleNav {
    display: inline-block;
    line-height: 46px; /* 数值可根据导航实际高度调整，保证和左侧图标对齐 */
    margin: 0;
}

3. （可选）删掉.icon类中冗余的vertical-align: middle属性，Flex布局已完成对齐工作，该属性不再生效。

如果希望完全避免浮动带来的布局问题，可以直接给导航根容器设置Flex布局，替换原有浮动逻辑，代码更简洁、布局稳定性更高：

.navbar ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
}
.navbar ul li:has(.middleNav) {
    flex: 1;
    text-align: center;
}

替换后可以删掉所有leftNav、middleNav、rightNav的float属性。

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