Blazor中使用HTML/CSS实现菜单项垂直居中的垂直导航栏

目标实现效果参考

在Blazor应用中使用HTML & CSS构建垂直导航栏，需要实现附图展示的效果，要求导航栏内部菜单项垂直居中对齐，现有实现代码如下：

现有Razor（HTML）代码 #

<ul>
<li class="nav-item" @onclick="OnTags">
    <img src="/images/imageOne.png"/>
    <span aria-hidden="true">Tags</span>
</li>
<li class="nav-item" @onclick="OnTags">
    <img src="/images/imageTwo.png"/>
    <span aria-hidden="true">Dashboard</span>
</li>
</ul>

现有CSS代码 #

ul {
    list-style-type: none;
    padding: 10px;
    width: 150px;
}
span {
    display: block;
    font-family: Bahnschrift Light;
    text-transform: uppercase;
}

li {
    display: block;
    width: 145px;
    border: 2px white;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    color: white;
    cursor: pointer;
    padding-top: 1em;
    padding-bottom: 1em;
}

直接调整CSS代码即可实现需求，核心是用Flex布局处理对齐逻辑，同时修复原有代码的小问题：

• 给.nav-item加Flex布局，实现图标和文字的垂直居中对齐，通过gap控制二者间距
• 给导航项内的图标设置固定尺寸，避免图片尺寸不统一导致对齐错位
• 修复原代码边框不生效的问题（缺少边框样式声明）
• 移除重复的padding设置，统一间距规则
• 如果需要整个导航栏的所有菜单项在侧边栏垂直方向整体居中，放开ul部分注释的代码即可

修改后的完整CSS代码：

ul {
    list-style-type: none;
    padding: 10px;
    width: 150px;
    /* 需要菜单项整体在侧边栏垂直居中时放开以下3行
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    */
}
span {
    font-family: "Bahnschrift Light", sans-serif;
    text-transform: uppercase;
}

li {
    width: 145px;
    border: 2px solid white;
}

.nav-item {
    font-size: 0.9rem;
    color: white;
    cursor: pointer;
    padding: 1em 0.5em;
    /* 核心对齐逻辑 */
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

说明：img的宽高、gap间距、padding值都可以根据设计稿实际尺寸调整。

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