如何垂直对齐含图片锚点的<li>内容？仅修改CSS不改动HTML

要实现两个列表项内的橙色边框链接（文本和图片）垂直对齐，同时保持列表项高度一致，只需调整以下CSS规则，无需修改HTML结构：

修改后的完整CSS #

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

#navbar {
    background: silver;
}

#navbar ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

#navbar ul > li {
    flex: 1;
    border: 5px dotted green;
    /* 让li成为flex容器，控制内部a标签的对齐 */
    display: flex;
}

#navbar a {
    border: 5px dotted orange;
    /* 让a标签占满li的高度，并垂直居中内容 */
    flex: 1;
    display: flex;
    align-items: center;
    /* 若需文本左对齐，替换为justify-content: flex-start */
    justify-content: center;
}

#navbar img {
    height: 80px;
    vertical-align: middle;
}

关键修改说明： #

• 给#navbar ul > li添加display: flex，让列表项本身成为flex容器，使内部链接元素能被flex布局精准控制。
• 给#navbar a设置flex: 1，确保链接占满列表项的可用空间；同时通过display: flex和align-items: center，让链接内的文本/图片实现垂直居中。
• 如果需要文本左对齐而非居中，只需将justify-content: center替换为justify-content: flex-start即可。

修改后，两个橙色边框的链接会在列表项内垂直对齐，且列表项高度会自动匹配最高内容的高度，完全满足需求。

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