使用Tailwind CSS开发侧边栏菜单时如何让右侧图标与列表文本高度对齐

问题修复方案 #

你现在图标不居中的核心原因是使用top: 50%绝对定位时，没有对图标自身做向上偏移半个高度的处理。更稳妥的实现方式是改用Flex布局做对齐，修改后的代码如下：

<ul id="sidemenu" class="text-center border-b-2 border-gray-200">
  <li class="border-t-2 border-gray-200">
    <div class="flex justify-between items-center px-4 py-3 cursor-pointer">
      <span>Title 1</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </div>
    <ul class="bg-gray-50 border-t-2 border-gray-100">
      <li class="py-2">Sub-Item-1</li>
      <li class="py-2">Sub-Item-2</li>
      <li class="py-2">Sub-Item-3</li>
    </ul>
  </li>
  <li class="border-t-2 border-gray-200">
    <span class="block py-3 cursor-pointer">Title 2</span>
  </li>
  <li class="border-t-2 border-gray-200">
    <span class="block py-3 cursor-pointer">Title 3</span>
  </li>
</ul>

主要修改点 #

• 把原本的块级容器调整为flex布局，用justify-between实现文本左置、图标右置的排布，items-center直接让两者在垂直方向完全居中，适配不同字号、图标尺寸的场景更稳定
• 移除了svg上的绝对定位相关属性，不需要额外计算偏移值
• 新增px-4作为左右内边距，避免内容贴边，可根据设计需求自行调整数值

如果你一定要保留绝对定位的写法，只需要给svg加-translate-y-1/2类即可实现垂直居中。

内容的提问来源于stack exchange，提问作者Andi S.